首页 › JavaScript › 扩展搜索框 转载研究中

vzhangxun 发表于 2013-1-29 10:50:10

扩展搜索框 转载研究中

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.store.removeAll(); this.el.dom.valuehttp://kangsoft.iteye.com/blog/= ”; this.triggers.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 = v; var o = {start: 0}; this.store.reload({params:o}); this.hasSearch = true; this.triggers.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
      })
    });

});

查看完整版本: 扩展搜索框 转载研究中