扩展搜索框 研究中

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
        })
    });

});