Extjs 4.1 如何选择组合中的第一项
Posted
技术标签:
【中文标题】Extjs 4.1 如何选择组合中的第一项【英文标题】:Extjs 4.1 How to select first item in combo 【发布时间】:2013-08-01 14:04:48 【问题描述】:我的组合看起来像 http://jsfiddle.net/Q5nNV/
一切都很好,但是当我搜索(键入)一些文本(如 asdf
)到组合框并单击清除按钮时
这不是选择第一项,它看起来像
这是我的代码
var states = Ext.create('Ext.data.Store',
fields: ['abbr', 'name'],
data : [
"abbr":"AK", "name":"",
"abbr":"AL", "name":"Alabama",
"abbr":"AZ", "name":"Arizona"
]
);
// Create the combo box, attached to the states data store
var combo = Ext.create('Ext.form.ComboBox',
fieldLabel: 'Choose State',
store: states,
triggerAction: 'all',
value: "AK",
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
trigger2Cls: 'x-form-clear-trigger',
onTrigger2Click: function (args)
this.setValue("AK");
,
tpl: new Ext.XTemplate('<tpl for=".">' + '<li style="height:22px;" class="x-boundlist-item" role="option">' + 'name' + '</li></tpl>'),
renderTo: Ext.getBody()
);
我希望当我单击清除按钮时,我的组合将选择第一个项目(空项目)。怎么解决谢谢
【问题讨论】:
【参考方案1】:这对我有用
var combo = Ext.getCmp('myId');
combo.select(combo.getStore().getAt(0));
【讨论】:
【参考方案2】:这应该可以解决问题。您基本上需要选择第一个值,使其重新查询,以便它可以清除过滤器,然后将焦点发送回该字段(可选):
Ext.onReady(function ()
// The data store containing the list of states
var states = Ext.create('Ext.data.Store',
fields: ['abbr', 'name'],
data : [
"abbr":"AK", "name":"",
"abbr":"AL", "name":"Alabama",
"abbr":"AZ", "name":"Arizona"
]
);
// Create the combo box, attached to the states data store
var combo = Ext.create('Ext.form.ComboBox',
fieldLabel: 'Choose State',
store: states,
triggerAction: 'all',
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
trigger2Cls: 'x-form-clear-trigger',
enableKeyEvents: true,
onTrigger2Click: function (args)
// Select the first record in the store
this.select(this.getStore().getAt(0));
// Force a re-query to clear the filter
this.doQuery();
// Send focus back to the field
this.focus();
,
tpl: new Ext.XTemplate('<tpl for=".">' + '<li style="height:22px;" class="x-boundlist-item" role="option">' + 'name' + '</li></tpl>'),
renderTo: Ext.getBody()
);
);
显然,重新查询和焦点是可选的。您可以轻松地从该代码中删除它们。
或者,您可以使用this.select(this.getStore().getAt(0));
,然后使用this.blur()
选择它,然后立即删除未填充的列表。
【讨论】:
【参考方案3】:这对我有用....
var cmbESTADO = component.query('#cmbESTADO')[0];
cmbESTADO.store.load(function(st)
cmbESTADO.select(cmbESTADO.getStore().getAt(0));
);
当组合框未加载时,选择不起作用。加载前然后选择。
【讨论】:
【参考方案4】:这对我有用:
me.myCombo.setValue(valueIndex);
【讨论】:
以上是关于Extjs 4.1 如何选择组合中的第一项的主要内容,如果未能解决你的问题,请参考以下文章