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