Ext中使用提取的公用Store

一、页面有太多的Store

使用Ext中，Combo下拉框是常用的元素，一般情况下，每个Combo都对应有Store为其加载下拉数据。

如果这些Store都显示地声明、定义在用例的JS脚本中，这样脚本显得有点乱。

一般情况下，Store需要加载的下拉数据都存放在数据库共同的字典表中，Store需要通过后台方法取得字典数据转换为Record。

可见，Combo的Store所要做的动作都基本一致，所以看到有人写一个生成Store的公用方法，我觉得这样做挺好的，既规范了取字典下拉数据的流程（避免每个开发人员各写一套），也避免了一个页面声明十几个Store，令脚本非常臃肿。

 

二、公用方法返回Store

此方法返回一个Store，此Store已指定对应的后台方法取得下拉数据，只需开发人员传入下拉字典的code就行。

/**
 * 下拉框数据源，从公用字典表取数
 * @param {} code 字典编码（DATA_CODE）
 * @return {} 字典项Store
 */
Ext.ui.DicComboxStore = function(code) {
    return new Ext.data.Store({
                proxy : new Ext.data.HttpProxy({
                            url : webPath + '/xxx.action'
                        }),
                reader : new Ext.data.JsonReader({
                            root : xxx,
                            fields : [xxx, xxx, xxx]
                        }),
                autoLoad : {
                    params : {
                        'dataCode' : code
                    }
                }
            });
}

如果需要使用Store的callback函数（即保证Store已成功加载完数据），就重新调用一次load方法，这样Store重新从数据源获取数据。这样做的话，这个Store就需要加载两次，如果数据量很小倒无所谓，如果数据较大就不好了，这样做还有个不好的地方，就是如果reload方法和load方法几乎同时执行，而且重叠了，出现了覆盖的情况，会导致load的callback不调用（我有一次用这样的方法构造Store，然后再onReady方法中执行load方法，结果该callbak函数偶尔不调用）。

 

三、公用方法返回不自动运行的Store

在页面中经常碰到Store未加载完成就使用setValue方法为其设置值，由于Store尚未加载完，故无法自动转换显示字面值。这时，我们需要一个还没有load的Store，因为我们需要callback函数。

/**
 * 下拉框数据源，从公用字典表取数
 * @param {} code 字典编码（DATA_CODE）
 * @param {} autoLoadFlag 是否自动load
 * @return {}
 */
Ext.ui.DicComboxStore = function(code, autoLoadFlag) {
    return new Ext.data.Store({
                proxy : new Ext.data.HttpProxy({
                            url : webPath
                                    + '/xxx.action'
                        }),
                reader : new Ext.data.JsonReader({
                            root : 'xxx',
                            fields : ['value', 'displayName']
                        }),
                listeners : {
                    beforeload : function(store) {
                        store.baseParams = {
                            'code' : code
                        }
                    }
                },
                autoLoad : (autoLoadFlag === false ? false : true)
            })
};