`
Relucent
  • 浏览: 209258 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

ExtJS 3.1.0 中Ext.data.Store关于baseParams的BUG修正

    博客分类:
  • JS
阅读更多

 ExtJs 中,我们使用GirdPanel的时候往往需要给后台传递查询条件。

一般是通过修改Store的baseParams。

 

var store = GirdPanel.getStore();
store.baseParams = { 查询条件 }
store.reload(); //刷新表格

 

 

这个方法在ExtJs 2.x 和 ExtJS 3.0.0 中都使用。

 

但是当使用ExtJS 3.1.0的时候,问题就出现了。

我们会发现无论如何修改baseParams,查询条件依然还是第一次修改baseParams时候的条件。

 

所以我们无法通过修改baseParams 来满足修改查询条件的目的。

 

 

于是我们观察ExtJS 3.1.0源码发现

reload : function(options){
    this.load(Ext.applyIf(options||{}, this.lastOptions));
}

 

这里我们要说一下lastOptions的作用。

lastOptions用于保留最后一次的查询配置信息。

 

 

我们再去跟踪其他部分的代码。

 

这个是load的时候的代码。

我们可以看到首先使用storeOptions 方法保存了最后一次的查询条件。然后在调用execute执行查询。

 

    load : function(options) {
        options = options || {};
        this.storeOptions(options);
        if(this.sortInfo && this.remoteSort){
            var pn = this.paramNames;
            options.params = options.params || {};
            options.params[pn.sort] = this.sortInfo.field;
            options.params[pn.dir] = this.sortInfo.direction;
        }
        try {
            return this.execute('read', null, options); // <-- null represents rs.  No rs for load actions.
        } catch(e) {
            this.handleException(e);
            return false;
        }
    },

 

 

    storeOptions : function(o){
        o = Ext.apply({}, o);
        delete o.callback;
        delete o.scope;
        this.lastOptions = o;
    },

 

   execute : function(action, rs, options, /* private */ batch) {
        if (!Ext.data.Api.isAction(action)) {
            throw new Ext.data.Api.Error('execute', action);
        }
        options = Ext.applyIf(options||{}, {
            params: {}
        });
        if(batch !== undefined){
            this.addToBatch(batch);
        }
        var doRequest = true;
        if (action === 'read') {
            Ext.applyIf(options.params, this.baseParams);
            doRequest = this.fireEvent('beforeload', this, options);
        }
        else {
            if (this.writer.listful === true && this.restful !== true) {
                rs = (Ext.isArray(rs)) ? rs : [rs];
            }
            else if (Ext.isArray(rs) && rs.length == 1) {
                rs = rs.shift();
            }
            if ((doRequest = this.fireEvent('beforewrite', this, action, rs, options)) !== false) {
                this.writer.apply(options.params, this.baseParams, action, rs);
            }
        }
        if (doRequest !== false) {            if (this.writer && this.proxy.url && !this.proxy.restful && !Ext.data.Api.hasUniqueUrl(this.proxy, action)) {
                options.params.xaction = action;               }
                 this.proxy.request(Ext.data.Api.actions[action], rs, options.params, this.reader, this.createCallback(action, rs, batch), this, options);
        }
        return doRequest;
    },

 

 

我们重点关注

storeOptions 方法中的 o = Ext.apply({}, o);

execute 的  Ext.applyIf(options.params, this.baseParams);

 

 

 

他的目的是这样的。

首先

[storeOptions ]

克隆一个新的 Options ,并保存到lastOptions中。

lastOptions使用新的Options的目的是原有Options发生变化lastOptions不变。

 

[execute ]

然后将baseParams的内容添加到Options.params中,并使用Options.params作为参数进行查询。

 

 

逻辑上没有错误

是将baseParams内容添加到原有的Options.params中。

新的lastOptions(Options2)内容不变。(因为是克隆的)

 

但是实际上Options.params发生变化的而同时。lastOptions中的params也发生了变化。

 

原因在storeOptions 方法上。

 o = Ext.apply({}, o);
做的只是一个浅层拷贝。拷贝之后

lastOptions.params 和 Options.params  其实是一个对象。

所以当Options.params发生变化lastOptions.params也发生变化。

(不知道是Jack Slocum故意这么设计的还是没有考虑周全,不过这造成了版本的不兼容

 

 

原因找到了,修改起来也就容易了。我们只需要重构storeOptions 方法,将其params也拷贝一次就可以了。

 

Ext.override(Ext.data.Store, {
  storeOptions : function(o) {
    o = Ext.apply({}, o);
    if(o.params)
      o.params = Ext.apply({}, o.params);
    }
    delete o.callback;
    delete o.scope;
    this.lastOptions = o;
  }
});

  

分享到:
评论
1 楼 zhangdaiping 2010-07-21  
<p>load( Object options ) : Boolean</p>
<p>Loads the Record cache from the configured proxy using the configured reader.</p>
<p> </p>
<p><strong>Notes</strong>:</p>
<p style="padding-left: 30px;"> </p>
<ul>
<li>Important: loading is asynchronous! This call will return before the new data has been loaded. To perform any post-processing where information from the load call is required, specify the callback function to be called, or use a a 'load' event handler.</li>
<li>If using remote paging, the first load call must specify the start and limit properties in the options.params property to establish the initial position within the dataset, and the number of Records to cache on each read from the Proxy.</li>
<li>If using remote sorting, the configured sortInfo will be automatically included with the posted parameters according to the specified paramNames.</li>
</ul>
<p> </p>
<p><strong>Parameters</strong>:</p>
<p> </p>
<p><strong>options</strong> : Object</p>
<p style="padding-left: 30px;">An object containing properties which control loading options:</p>
<p> </p>
<p style="padding-left: 30px;">params :Object</p>
<p style="padding-left: 60px;">An object containing properties to pass as HTTP parameters to a remote data source. Note: params will override any baseParams of the same name.</p>
<p style="padding-left: 60px;">Parameters are encoded as standard HTTP parameters using Ext.urlEncode.</p>
<p style="padding-left: 30px;"> </p>
<p style="padding-left: 30px;">callback : Function</p>
<p style="padding-left: 60px;">A function to be called after the Records have been loaded. The callback is called after the load event is fired, and is passed the following arguments:</p>
<p style="padding-left: 90px;">r : Ext.data.Record[] An Array of Records loaded.</p>
<p style="padding-left: 90px;">options : Options object from the load call.</p>
<p style="padding-left: 90px;">success : Boolean success indicator.</p>
<p style="padding-left: 30px;"> </p>
<p style="padding-left: 30px;">scope : Object</p>
<p style="padding-left: 60px;">Scope with which to call the callback (defaults to the Store object)</p>
<p style="padding-left: 30px;"> </p>
<p style="padding-left: 30px;">add : Boolean</p>
<p style="padding-left: 60px;">Indicator to append loaded records rather than replace the current cache. Note: see note for loadData</p>
<p> </p>

相关推荐

    Ext.data.Store的基本用法

    `Ext.data.Store`是ExtJS框架中用于管理数据的核心组件之一。它主要负责数据的存储、加载、更新等操作,并且提供了多种方法来方便地处理这些数据。本文将详细介绍`Ext.data.Store`的基本用法。 #### 二、创建Ext....

    Extjs 继承Ext.data.Store不起作用原因分析及解决

    关于这个原因有很多种,我只说下我遇到的 我这样 写Store来复用的 代码如下: DocStore = Ext.extend(Ext.data.Store,{ initComponent:function(){ this.proxy = new Ext.data.HttpProxy({url:this.url}); this....

    extjs中Ext.Panel和TreePanel 组件动态加载本地页面数据

    在EXTJS这个强大的JavaScript框架中,`Ext.Panel`和`TreePanel`是两个非常重要的组件,它们被广泛用于构建复杂的用户界面。这篇文章将探讨如何在这些组件中动态加载本地页面数据,以提升用户体验并实现灵活的数据...

    extjs-Ext.ux.form.LovCombo下拉框

    在EXTJS框架中,`Ext.ux.form.LovCombo`是一种自定义组件,它扩展了基本的`Ext.form.field.ComboBox`,提供了更丰富的功能,尤其是针对多选和联动选择的需求。这个组件通常用于创建具有“lov”(即“Look Up Value”...

    Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)

    代码如下: var Store = Ext.create(‘Ext.data.Store’, { pageSize: pageSize, model: ‘Ext.data.Model名称’, autoLoad: false, proxy: { type: ‘ajax’, url: ‘请求路径’, getMethod: function(){ return ...

    ExtJs3.3中文API.CHM_extjs3.3中文文档_

    在"ExtJs3.3中文API.CHM"中,开发者可以找到关于ExtJS 3.3的所有API和类的详细描述,以及相关的示例代码。 ExtJS 3.3的核心特性包括: 1. **组件化**:ExtJS基于组件模型,提供了一系列预定义的UI组件,如按钮、...

    ExtJS 4.0 改善Ext.grid.plugin.RowEditing (重构,v1.4版本,2011-09-11)

    这篇文章的标题指出这是一个关于“Ext.grid.plugin.RowEditing”的重构,版本为v1.4,发布日期为2011年9月11日。重构通常意味着代码的改进,可能涉及性能优化、错误修复或功能增强。在4.0版本中,RowEditing插件的...

    extjs4的Ext.frorm.Panel控件属性说明和表单控件说明

    主要用例子说明extjs4的form表单的运用,其中有表单属性说明,表单控件运用说明如: title:'表单', //表单标题 bodyStyle:'padding:5 5 5 5', //表单边距 height:120, //表单高度 width:200, //表单宽度 ...

    Extjs3.1.0

    2. "ext-3.1.0.zip" - 这是ExtJS 3.1.0的核心库文件,解压后将包含所有必要的JavaScript文件、CSS样式表、图像和其他资源,用于在网页中引入和使用ExtJS框架。 关于ExtJS 3.1.0的一些关键知识点包括: 1. **组件...

    ExtJS ToolTip功能

    var store = Ext.create('Ext.data.ArrayStore',{ fields:['company','price','change'], data:[ ['3mCo',71.72,0.02], ... ] }); ``` 创建了一个数组类型的存储器(`ArrayStore`),用于存储公司的名称、...

    ExtJs的Ext.Ajax.request实现waitMsg等待提示效果

    首先,ExtJs中的Ext.MessageBox是一个常用来与用户进行交互的弹窗组件。它可以用来显示警告框、确认框等。在进行Ajax请求之前,我们可以使用Ext.MessageBox确认框来询问用户是否要进行操作,并在用户确认后显示一个...

    extJs 2.1学习笔记

    6. Ext.data.Store篇 10 7. Ext.data.JsonReader篇一 12 8. Ext.data.JsonReader篇二 15 9. Ext.data.HttpProxy篇 19 10. Ext.data.Connection篇一 20 11. Ext.data.Connection篇二 24 12. Ext.Updater篇一 26 13. ...

    ExtJS 3.4.0中的 ext.jsb2 文件

    在3.4.0版本中,`ext.jsb2` 文件是一个关键组成部分,它对于理解和开发基于ExtJS的应用程序至关重要。这个文件的缺失可能会对升级到4.0.0版本的开发者造成困扰,因为4.0.0版本不再包含这个文件,但幸运的是,它可以...

    extjs4.1-ux.rar

    Extjs4.1多个扩展 1、Ext.ux.aceeditor.Panel 2、Ext.ux.grid.feature.Tileview 3、Ext.ux.upload.Button 4、Ext.ux.toggleslide.ToggleSlide 5、Ext.ux.container.ButtonSegment 6、Ext.ux.grid.plugin.RowEditing ...

    EXTJS3 Ext.PagingToolbar() 快捷键应用

    在EXTJS3中,`Ext.PagingToolbar()` 是一个非常重要的组件,用于在大量数据的网格或视图中实现分页功能。这个组件允许用户轻松地浏览和操作大量的记录,而不需要一次性加载所有数据,从而提高了应用程序的性能和用户...

    Extjs4.X下comboboxTree下拉树型菜单,完美支持多选、单选,绝对好用

    store: Ext.create('Ext.data.TreeStore', { model: 'Department', root: { text: '所有部门', expanded: true, children: [ /* ... */ ] } }), displayField: 'text', valueField: 'id', mode: '...

    Ext.Ajax.request2.x实现同步请求

    在EXTJS库中,`Ext.Ajax.request`是用于发送Ajax请求的核心方法,它支持异步和同步操作。本文将详细解析如何利用`Ext.Ajax.request`实现同步请求,并探讨其背后的原理和注意事项。 首先,我们需要理解Ajax的本质,...

    ExtJs3.0中Store添加 baseParams 的Bug

    在ExtJs 3.0版本中,用户遇到一个与`Store`对象的`baseParams`相关的bug。`baseParams`是ExtJs中的一个重要属性,它用于设置在每次加载`Store`时都会附加到请求的参数。这些参数通常用于传递服务器端需要的固定信息...

Global site tag (gtag.js) - Google Analytics