日期:2014-05-16  浏览次数:20489 次

ExtJs搜索控件、插件


插件代码如下:
?

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'//搜索字段
})

?