公用方法Store
2015-08-06 17:33
615 查看
一、页面有太多的Store
使用Ext中,Combo下拉框是常用的元素,一般情况下,每个Combo都对应有Store为其加载下拉数据。
如果这些Store都显示地声明、定义在用例的JS脚本中,这样脚本显得有点乱。
一般情况下,Store需要加载的下拉数据都存放在数据库共同的字典表中,Store需要通过后台方法取得字典数据转换为Record。
可见,Combo的Store所要做的动作都基本一致,所以看到有人写一个生成Store的公用方法,我觉得这样做挺好的,既规范了取字典下拉数据的流程(避免每个开发人员各写一套),也避免了一个页面声明十几个Store,令脚本非常臃肿。
二、公用方法返回Store
此方法返回一个Store,此Store已指定对应的后台方法取得下拉数据,只需开发人员传入下拉字典的code就行。
如果需要使用Store的callback函数(即保证Store已成功加载完数据),就重新调用一次load方法,这样Store重新从数据源获取数据。这样做的话,这个Store就需要加载两次,如果数据量很小倒无所谓,如果数据较大就不好了,这样做还有个不好的地方,就是如果reload方法和load方法几乎同时执行,而且重叠了,出现了覆盖的情况,会导致load的callback不调用(我有一次用这样的方法构造Store,然后再onReady方法中执行load方法,结果该callbak函数偶尔不调用)。
三、公用方法返回不自动运行的Store
在页面中经常碰到Store未加载完成就使用setValue方法为其设置值,由于Store尚未加载完,故无法自动转换显示字面值。这时,我们需要一个还没有load的Store,因为我们需要callback函数。
使用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) }) };
相关文章推荐
- extjs grid取到数据而不显示的解决
- ExtJS下grid的一些属性说明
- Extjs在exlipse中设置自动提示的方法
- 常用Extjs工具:Extjs.util.Format使用方法
- extjs DataReader、JsonReader、XmlReader的构造方法
- 学习ExtJS(一) 之基础前提
- extjs 为某个事件设置拦截器
- ExtJs 学习笔记基础篇 Ext组件的使用第1/2页
- Extjs列表详细信息窗口新建后自动加载解决方法
- Extjs grid添加一个图片状态或者按钮的方法
- Extjs学习笔记之四 工具栏和菜单
- extjs form textfield的隐藏方法
- ExtJS 2.0实用简明教程之应用ExtJS
- ExtJS Store的数据访问与更新问题
- 不用写JS也能使用EXTJS视频演示
- Extjs改变树节点的勾选状态点击按钮将复选框去掉
- extjs 列表框(multiselect)的动态添加列表项的方法
- ExtJs默认的字体大小改变的几种方法(自己整理)
- ExtJS 配置和表格控件使用第1/2页
- 解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题