Extjs Combo控件 下拉不能显示全部候选项的解决方法
例子： 在ViewPort.ui.js中有一个combo 控件初始化时，只能显示当前选中项，不能显示全部候选项。1、按照网上google到的资料中显示，需要将triggerAction属性设置为"all",设置为"query",或者不设置都不能正常显示全部候选项。刚开始由于是静态绑定数据。设置triggerAction后该问题得到解决。如下：
item:[ { xtype: 'combo', id: "cbdomain", x: 60, y: 10, width: 120, editable: false, store:[["telecom","telecom"],["animal","animal"]], value:'telecom', allowBlank: false, enabled:false, triggerAction: "all" },{....} ]
2、后由于需求发生改变，需要从后台取数据，动态生成combo 的下拉选项。将store指给一个异步数据操作：getAllDomainstore。发现上述问题重新出现。又只能显示当前选中项了。 在网上反复查找没有找到相应解决方案。后自己实验发现，可通过设置displayField属性，使得该问题得到圆满解决。如下：
item:[ { xtype: 'combo', id: "cbdomain", x: 60, y: 10, width: 120, editable: false, store:getAllDomainstore, mode: 'remote', valueFiled: 'domdesc', displayField:'domdesc', allowBlank: false, enabled:false, triggerAction: "all", selectOnFocus : true, forceSelection : true },{.....} ]
可能由于Extjs 中的Combo 采用动态获取数据时，显示字段和值字段并不能事先确定下来。所以动态获取数据的combo必须严格设置displayFiled和valueField属性，否则会影响数据展示结果。
附：
一、数据操作 store 的定义。
文件：MainStore.js
如下：
var getAllDomainstore = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({ url:'RetrieveData', method:'POST' }), reader: new Ext.data.XmlReader ( { totalProperty: "pagecount", record: 'domain' }, [ {name:"id",type:'int'}, {name:"domdesc"} ] ) }); getAllDomainstore.on('beforeload',function(){ Ext.apply( this.baseParams, { webAction:'getAllDomains', username:Ext.ComponentMgr.get('cusername').getValue(), domain: 'telecom' }); }); getAllDomainstore.on('load',onstoreStoreLoad, getAllDomainstore, true); function onstoreStoreLoad() { if (getAllDomainstore.getCount() > 0) { // 一点小插曲：动态获取的数据中总会有一个空白记录，有时候空白记录并不是必要的，但是我没有找到清除空白记录的设置，还好无论查询情况如何，这条空白记录总是第一条记录（index = 0） // 于是我在每次load的时候，将这条记录强行删除了，如下： getAllDomainstore.remove(getAllDomainstore.getAt(0)); Ext.ComponentMgr.get("cbdomain").setValue('telecom'); Ext.ComponentMgr.get("cbdomian_deploy").setValue('telecom'); Ext.ComponentMgr.get("cbdomain3").setValue('telecom'); Ext.ComponentMgr.get("cbdomain5").setValue('telecom'); Ext.ComponentMgr.get("cbdomain6").setValue('telecom'); Ext.ComponentMgr.get("cbdomain_MF_TraingCase").setValue('telecom'); } }
二、载入的时机：
载入数据：登录成功后。
文件： ModalForm.js
如下：
Ext.Ajax.request({ url : 'Login', method: 'POST', params:{ webAction:'login', username: curusername, //Ext.ComponentMgr.get('username').getValue(), password: '' }, success: function(response) { getAllDomainstore.load({ params:{ webAction:'getAllDomains', username:Ext.ComponentMgr.get('cusername').getValue(), domain:"telecom" } }); });
页:
[1]