先来张效果图:
采用triggerfield组件实现。
{
xtype: 'triggerfield',
onTrigger1Click: function() {
var me = this;
if (me.hasSearch) {
me.setValue('');
me.store.clearFilter();
me.hasSearch = false;
me.triggerCell.item(0).setDisplayed(false);
me.updateLayout();
}
},
onTrigger2Click: function() {
var me = this,
value = me.getValue();
if (value.length > 0) {
me.store.clearFilter();
me.store.filter({
filterFn: function(item) {
return item.get('postQualityName').indexOf(value) >= 0;
}
});
me.hasSearch = true;
me.triggerCell.item(0).setDisplayed(true);
me.updateLayout();
}
},
trigger1Cls: 'x-form-clear-trigger',
trigger2Cls: 'x-form-search-trigger',
store: 'Person4Select',
paramName: 'query',
hasSearch: 'false',
width: 250,
fieldLabel: '指标名称',
labelAlign: 'right',
labelWidth: 55,
selectOnFocus: true,
listeners: {
afterrender: {
fn: me.onTriggerfieldAfterRender1111,
scope: me
},
specialkey: {
fn: me.onTriggerfieldSpecialkey1111,
scope: me
}
}
}
onTriggerfieldAfterRender1111 和 onTriggerfieldSpecialkey1111
onTriggerfieldAfterRender1111: function(component, eOpts) {
var me = component;
me.triggerCell.item(0).setDisplayed(false);
me.store = me.ownerCt.ownerCt.down('#postQuality4PostQuality').getStore();
if(typeof(me.store.isStore) == 'undefined') {
me.store = Ext.getStore(me.store);
}
me.store.remoteFilter = false;
if (!me.store.proxy.hasOwnProperty('filterParam')) {
me.store.proxy.filterParam = me.paramName;
}
me.store.proxy.encodeFilters = function(filters) {
return filters[0].value;
};
},
onTriggerfieldSpecialkey1111: function(field, e, eOpts) {
if (e.getKey() == e.ENTER) {
field.onTrigger2Click();
}
}
原文请移步:争一代雄风 » extjs 通用搜索框
本博客文章除特别声明,全部都是原创!
转载请注明: 转载自“争一代雄风” (www.wenhaozhong.com)
转载请注明: 转载自“争一代雄风” (www.wenhaozhong.com)