扩展搜索框 转载研究中

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.valuehttp://kangsoft.iteye.com/blog/= ”; 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’//搜索字段})
Ext.require([
'Ext.form.ComboBox',
'Ext.tip.QuickTips',
'Ext.data.*'
]);

Ext.onReady(function() {
Ext.tip.QuickTips.init();

// Define the model for a State
Ext.regModel('State', {
fields: [
{type: 'string', name: 'xh'},
{type: 'string', name: 'xm'}
]
});

// The data for all states

// The data store holding the states; shared by each of the ComboBox examples below
// var store = new Ext.data.Store({
// model: 'State',
// data: states
// });

var comboxStore = new Ext.data.Store({
model: 'State',
proxy: {
type:'ajax',
url: "http://localhost:8080/cjcx/servlet/Getcj?Method=GetAllxhxm" ,
reader:'json'
},
atuoLoad:true
} );
comboxStore.load();

// ComboBox with a custom item template
var simple = new Ext.form.ComboBox({
fieldLabel: 'Input info',
renderTo: 'simple',
displayField: 'xm',
width: 500,
labelWidth: 130,
hideTrigger:true,
typeAhead:true,//延时查询，与下面的参数配合
typeAheadDelay:250,//默认250
blankText:'Input info',
emptyText:'Input info',

store: comboxStore,
queryMode: 'local',
getInnerTpl: function() {
return '<div ext:qtip="{xh}"> {xm}</div>';
}
});

// Collapsible code panels; ignore: /

Ext.select('pre.code').each(function(pre) {
new Ext.form.FieldSet({
contentEl: pre,
renderTo: pre.parent(),
title: 'View code for this example',
collapsible: true,
collapsed: true
})
});

});