ExtJS中combo组件设置默认值插件
来源:互联网 发布:淘宝手机连接转换 编辑:程序博客网 时间:2024/06/05 06:34
相信很多人都遇到了在ExtJS框架中设置combo组件默认值的需求,ExtJS框架并没有提供现成的配置项或者方法来解决此问题,本人认为主要是因为此种需求的应用场景有限且很难完成适应于不同场景的实现。
设置默认值的需求场景一般是在Form查询表单上,提供一个默认的查询项目。多数情况下,这种需求的combobox组件一般位于诸如tabpanel这样的模块主面板下的form中,或者位于window组件下的form中。前者可以通过监听form的afterrender事件实现;后者可以通过监听window的show事件实现。
1.parentType:可以设置为’form’或’window’属性,分别对应combo组件位于诸如tabpanel这样的模块主面板下的form中和位于window组件下的form中。
2.displayIndex:显示的默认值在store中的位置,默认为0,即显示第一项。
插件同时支持combo组件数据源查询的local模式和remote模式。
combo组件的设值其实很简单:
var record = store.getAt(index);combo.setValue(record.get(valueField));即根据index获取store里面需要设置默认值的model对象,然后调用combo组件的setValue方法即可。但是选择设值的“时机”,达到“默认值”的效果,可能就显得比较复杂了。
设置默认值的需求场景一般是在Form查询表单上,提供一个默认的查询项目。多数情况下,这种需求的combobox组件一般位于诸如tabpanel这样的模块主面板下的form中,或者位于window组件下的form中。前者可以通过监听form的afterrender事件实现;后者可以通过监听window的show事件实现。
如果在项目中combo组件设置默认值的需求场景很少,可以视情况在combo组件的父容器里直接添加相关监听事件来设置默认值。如果应用场景比较多,通过插件的方式配置就比较明智了。
下面展示本人所开发的实现combo组件设置默认值功能的插件,代码如下:
/** * 设置combo默认值插件 * By Mask */Ext.define('Ext.ux.combo.DefaultValuePlugin', { extend: 'Ext.AbstractPlugin', alias: ['plugin.defaultvalue', 'plugin.defaultvalueplugin'], parentType: 'form', displayIndex: 0, init: function(combo) { var me = this; me.combo = combo; combo.on('afterrender', me.setParentEvent, me, {single: true}); }, setParentEvent: function() { var me = this, parentType = me.parentType; parent = me.combo.up(parentType); if(parent) { if(parentType == "form") { parent.on('afterrender', me.setDefaultValue, me); } else if(parentType == "window") { parent.on('show', me.setDefaultValue, me); } } }, setDefaultValue: function() { var me = this, combo = me.combo, store = combo.getStore(), valueCode = combo.valueField, record; if(combo.queryMode == "remote" && store.getCount() <= 0) { combo.lastQuery = combo.allQuery; store.load({ params: combo.getParams(combo.allQuery), callback: function(records, operation, success) { if(success == true) { record = records[me.displayIndex]; if(record) { combo.setValue(record.get(valueCode)); } } } }); } else { record = store.getAt(me.displayIndex); if(record) { combo.setValue(record.get(valueCode)); } } }, destroy: function() { delete this.combo; }})此插件包含两个配置项:
1.parentType:可以设置为’form’或’window’属性,分别对应combo组件位于诸如tabpanel这样的模块主面板下的form中和位于window组件下的form中。
2.displayIndex:显示的默认值在store中的位置,默认为0,即显示第一项。
插件同时支持combo组件数据源查询的local模式和remote模式。
使用方式很简单,以plugin的方法配置进入combobox组件中即可:
{ xtype: 'combo', fieldLabel: '远程模式', queryModel: 'remote', store: remoteStore, displayField: 'username', valueField: 'forumid', plugins: {ptype: 'defaultvalue',displayIndex: 2,parentXType: 'form' }}
本文第一次发表于:[ExtJS]combobox设置默认值插件
更多ExtJS相关内容请点击:戴面罩的怪杰
- ExtJS中combo组件设置默认值插件
- extjs中combo组件的100%宽度设置
- Extjs中Combo组件添加tooltip
- Extjs中Combo组件添加tooltip
- Combo设置默认值
- ExtJs combo设置分页
- extjs中grid,设置CheckboxSelectionModel的默认值
- extjs中grid,设置CheckboxSelectionModel的默认值
- ExtJS设置Datepicker默认值
- extjs设置日期默认值
- ADF中SELECTONECHOICE组件设置默认值
- Extjs combo
- Extjs中ComboBox选中默认值
- Extjs中ComboBox选中默认值
- 给SelectOneChoice组件设置默认值
- ExtJs combobox 下拉框设置默认值初始值
- ExtJs日期datefield控件设置默认值
- ExtJs日期datefield控件设置默认值
- TCPDUMP
- bootloader lcd init
- android安全漏洞(三) 钓鱼程序
- REST vs Web Service
- scrollToRowAtIndexPath出错原因分析
- ExtJS中combo组件设置默认值插件
- 用Java实现 ,冒泡排序与普通排序的区别
- 双线服务器和CDN的区别
- RCP 自定义用于visible/enable when表达式的变量
- delphi动态生成树(dxTreeView)
- Oracle 行列转换 总结
- Java 虚拟机 调优
- linux 启动过程分析
- vs2012下 error4996