Ext ComboBox 動態查詢

Ext中的combobox有屬性typeAhead：true 可以實現模糊匹配，但是是從開始匹配的，如果需要自定的的匹配，則需要監聽beforequery方法，實現自己的匹配查詢方法：

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

1.使用simplestore正常 
2.使用遠程數據，設置triggerAction:'all'，正常 
3.使用遠程數據，設置triggerAction:'query',讀不出數據 
4.使用遠程數據，設置triggerAction:'query',在combobox中輸入4個字符可加載到數據,但沒有篩選功能 

combo.js 

 

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
 

combo.html: 

<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>

 

Ext.form.ComboBox級聯菜單(mode : 'local[remote]')

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

現在我需要在點擊dwcombo 下拉框的時候出發bdzcombo 並給它加載數據

我只說我遇到的問題了，關於怎么加載的我就認為大家都會了

我遇到了這樣一個問題，當我點擊第一級菜單的時候，第二級菜單並沒有加載數據

反復試了幾次之后我發現，必須先激活第二級的菜單，再點擊第一級菜單，這時才能給第二級菜單加載數據

那么第二級菜單真的在加載頁面時沒有自動激活嗎

我去API里看了一下，ComboBox就沒有激活自身的方法

細心的朋友會發現這樣產生效果是第二級菜單下面事實上是有兩個格子

我才意思到我忘記了一個重要的屬性，就是“mode”

試了之后，果然解決了這個問題

我設置了mode:'local'

原來是這樣的，當我們點擊第一級菜單的時候，由於select事件，就已經加載了第二級菜單的數據

那么我們在點擊第二級菜單的時候，還用不用去服務器端去數據呢？

當然不用了，因為數據已經取過來了

我們只需要在本地取就可以了

而mode默認的值為remote