日期:2014-05-16 浏览次数:20447 次
下拉框预选某个常用的选项是常见的需求,用HTML的select控件实现该功能十分简单,但是用ExtJS的combobox来实现该功能还需费一番周折。主要的思路是:
以下是一个可行的实现示例:
?
/* define the store */ var stDataSources = new Ext.data.JsonStore( { root: 'dataSources', totalProperty: 'total', idProperty: 'datadir', id:'datadir', autoLoad: true, remoteSort: false, fields: [ {name: 'datadir', type: 'string'}, {name: 'label', type: 'string'} ], baseParams: {usr: usr, pwd: pwd, org: org}, sortInfo: {field: 'label', direction: 'ASC'}, proxy: new Ext.data.HttpProxy({ url: 'cgi/get-datasources.cgi' }) }); /* define the combobox field */ { fieldLabel:'Use data from', name: 'new_datasrc', id: 'cmbData', hiddenName: 'new_datasrc', hiddenId: 'new_datasrc', xtype: 'combo', triggerAction: 'all', allowBlank: false, forceSelection: true, mode: 'local', store: stDataSources, displayField:'label', valueField: 'datadir', typeAhead: true, forceSelection: true, selectOnFocus: true, minChars: 2, tooltipText: "Select Data Source.", listeners: { render: function(c) { c.getStore().on("load", function(s, r, o) { c.setValue(r[0].get('datadir')); }); } } }
?该例子中设置预设选项实在render事件处理函数注册store的load事件处理例程来实现的。render事件通常要比store的load事件更早发生,这样就能保证正确的时序。另外一个办法是在combobox的show事件中直接从store取到预设选项并调用combobox的setValue方法:
?
listeners: { show: function(c) { c.setValue(c.getStore().getAt(0).get('datadir')); }
?然而,combobox的show事件经常没有触发。