Ext ComboBox 动态查询详解编程语言

var gfxmComb  = new Ext.form.ComboBox({ 
        id : 'gfxmComb', 
        store : gfxmStore, 
        typeAhead : true, 
        mode : 'local', 
        editable : true, 
        displayField :'xmMc', 
        valueField :'xmBm', 
        triggerAction : 'all', 
        selectOnFocus : true, 
        listeners : { 
            'beforequery':function(e){ 
                  
                var combo = e.combo;   
                if(!e.forceAll){   
                    var input = e.query;   
                    // 检索的正则 
                    var regExp = new RegExp(".*" + input + ".*"); 
                    // 执行检索 
                    combo.store.filterBy(function(record,id){   
                        // 得到每个record的项目名称值 
                        var text = record.get(combo.displayField);   
                        return regExp.test(text);  
                    }); 
                    combo.expand();   
                    return false; 
                } 
            } 
        } 
    });

var employee_store = new Ext.data.Store({ 
     proxy:new Ext.data.HttpProxy({url:"../Process/Form_cli_e.ashx"}), 
     reader: new Ext.data.JsonReader({ 
        //remote:true, 
        totalProperty:'totalProperty', 
        root:'root', 
        id:'employee_store' 
     },[ 
            {name: 'ry_name'}, 
            {name: 'ry_gh'} 
     ])  
 }); 
  function cli_e(){ 
    var cli_e_box = new Ext.form.ComboBox({ 
        mode:'remote', 
        idname:'cli_E', 
        name:'cli_E', 
        displayField:'ry_name', 
        valueField:'ry_gh', 
        store:employee_store, 
            typeAhead:false, 
            triggerAction:'query' 
    }); 
    return cli_e_box; 
 }

Ext.ns('Example'); 
  
Example.comboConfig = { 
     xtype:'combo' 
  
    // we need id to focus this field. See window::defaultButton 
    ,id:'combo' 
  
    // we want to submit id, not text 
    ,valueField:'persID' 
    ,hiddenName:'persID' 
  
    // could be undefined as we use custom template 
    ,displayField:'persLastName' 
  
    // query all records on trigger click 
    ,triggerAction:'all' 
  
    // minimum characters to start the search 
    ,minChars:2 
  
    // do not allow arbitrary values 
    ,forceSelection:true 
  
    // otherwise we will not receive key events 
    ,enableKeyEvents:true 
  
    // let's use paging combo 
    ,pageSize:5 
  
    // make the drop down list resizable 
    ,resizable:true 
  
    // we need wider list for paging toolbar 
    ,minListWidth:220 
  
    // force user to fill something 
    ,allowBlank:false 
  
    // store getting items from server 
    ,store:new Ext.data.JsonStore({ 
         id:'persID' 
        ,root:'rows' 
        ,totalProperty:'totalCount' 
        ,fields:[ 
             {name:'persID', type:'int'} 
            ,{name:'persLastName', type:'string'} 
            ,{name:'persFirstName', type:'string'} 
        ] 
        ,url:'process-request.php' 
        ,baseParams:{ 
             cmd:'getData' 
            ,objName:'person2' 
            ,fields:'["persLastName","persFirstName"]' 
        } 
    }) 
  
    // concatenate last and first names 
    ,tpl:'<tpl for="."><div class="x-combo-list-item">{persLastName}, {persFirstName}</div></tpl>' 
  
    // listeners 
    ,listeners:{ 
        // sets raw value to concatenated last and first names 
         select:function(combo, record, index) { 
            this.setRawValue(record.get('persLastName') + ', ' + record.get('persFirstName')); 
        } 
  
        // repair raw value after blur 
        ,blur:function() { 
            var val = this.getRawValue(); 
            this.setRawValue.defer(1, this, [val]); 
        } 
  
        // set tooltip and validate 
        ,render:function() { 
            this.el.set( 
                {qtip:'Type at least ' + this.minChars + ' characters to search in last name'} 
            ); 
            this.validate(); 
        } 
  
        // requery if field is cleared by typing 
        ,keypress:{buffer:100, fn:function() { 
            if(!this.getRawValue()) { 
                this.doQuery('', true); 
            } 
        }} 
    } 
  
    // label 
    ,fieldLabel:'Combo' 
}; 
  
// main entry point 
Ext.onReady(function() { 
    Ext.QuickTips.init(); 
  
    // invalid markers to sides 
    Ext.form.Field.prototype.msgTarget = 'side'; 
  
    // create and show window 
    var win = new Ext.Window({ 
         id:'combo-win' 
        ,title:Ext.fly('page-title').dom.innerHTML 
        ,layout:'fit' 
        ,width:300 
        ,height:150 
        ,closable:false 
        ,border:false 
  
        // let window code to focus the combo on show 
        ,defaultButton:'combo' 
        ,items:{ 
             xtype:'form' 
            ,frame:true 
            ,defaults:{anchor:'-20'} 
            ,items:[{ 
                 xtype:'textfield' 
                ,fieldLabel:'Dummy Field' 
            } 
                ,Example.comboConfig 
            ] 
        } 
    }); 
  
    win.show(); 
  
}); // eo onReady 
 

<html> 
<head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" /> 
  <link id="theme" rel="stylesheet" type="text/css" href="css/empty.css" /> 
  <link rel="stylesheet" type="text/css" href="css/icons.css" /> 
  <link rel="stylesheet" type="text/css" href="css/formloadsubmit.css" /> 
  <link rel="shortcut icon" href="img/extjs.ico" /> 
  <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script> 
  <script type="text/javascript" src="ext/ext-all-debug.js"></script> 
  <script type="text/javascript" src="combo.js"></script> 
  <title id="page-title">Combo with Remote Store by Saki</title> 
</head> 
<body> 
  <div class="adsense" style="margin:4px"> 
    <script type="text/javascript"><!-- 
    google_ad_client = "pub-2768521146228687"; 
    /* 728x90, for examples ifram */ 
    google_ad_slot = "5477402227"; 
    google_ad_width = 728; 
    google_ad_height = 90; 
    //--> 
    </script> 
    <script type="text/javascript" 
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
    </script> 
  </div> 
  
<!-- delete following line if you don not want stats included --> 
<?if("examples.extjs.eu"===$_SERVER["SERVER_NAME"]){$page='combo';include("stats.php");}?> 
</body> 
</html>

var dwStore = new Ext.data.JsonStore({ 
  url:"bdzJbqk.html?m=loaddwdata", 
   root:"dwresults", 
   totalProperty:"dwtotalCount", 
   fields:["id","name"] 
}); 
    dwStore.load(); 
     
var bdzStore = new Ext.data.JsonStore({ 
  url:"bdzJbqk.html?m=loadbdzdata", 
   root:"bdzresults", 
   totalProperty:"dwtotalCount", 
   fields:["id","name"] 
}); 
var bdzcombo = new Ext.form.ComboBox({  
       id:'bdz', 
       width:60, 
       listWidth:58, 
       store: bdzStore, 
       value: "全部",    
       valueField :"id",  
       displayField: "name",  
       forceSelection: true,  
       editable: false,  
       triggerAction: 'all',  
       //mode : 'local', 
       allowBlank:true  
}); 
 
var dwcombo = new Ext.form.ComboBox({  
       width:150,  
       id:'search', 
       store: dwStore, 
       value: '${cdssdw}',    
       valueField :"id",  
       displayField: "name",  
       forceSelection: true,  
       hiddenName:'test',  
       editable: false,  
       triggerAction: 'all',  
       allowBlank:true,  
       emptyText:'请选择',  
       fieldLabel: '多选下拉ComBo', 
       mode : 'remote', 
       listeners:{ 
            select :function(dwcombo){ 
            bdzStore.load({params:{cdssdw: dwcombo.getValue()}}); 
          } 
       } 
});