日期:2014-05-16 浏览次数:20525 次
下拉框预选某个常用的选项是常见的需求,用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事件经常没有触发。