插件代码如下:
Ext.app.SearchField = Ext.extend(Ext.form.TwinTriggerField, { initComponent : function(){ if(!this.store.baseParams){ this.store.baseParams = {}; } Ext.app.SearchField.superclass.initComponent.call(this); this.on('specialkey', function(f, e){ if(e.getKey() == e.ENTER){ this.onTrigger2Click(); } }, this); }, validationEvent:false, validateOnBlur:false, trigger1Class:'x-form-clear-trigger', trigger2Class:'x-form-search-trigger', hideTrigger1:true, width:180, hasSearch : false, paramName : 'query', onTrigger1Click : function(){ if(this.hasSearch){ this.store.baseParams[this.paramName] = ''; this.store.removeAll(); this.el.dom.value = ''; this.triggers[0].hide(); this.hasSearch = false; this.focus(); } }, onTrigger2Click : function(){ var v = this.getRawValue(); if(v.length < 1){ this.onTrigger1Click(); return; } if(v.length < 2){ Ext.Msg.alert('无效搜索', '最小需要输入两个字符进行搜索!'); return; } this.store.baseParams[this.paramName] = v; var o = {start: 0}; this.store.reload({params:o}); this.hasSearch = true; this.triggers[0].show(); this.focus(); } }); Ext.reg('searchfield', Ext.app.SearchField);
创建部分如下所示:
new Ext.app.SearchField({
width:200,
store: searchStore,//此store为数据源部分
paramName: 'city'//搜索字段
})