Ext ComboBox 动态查询

原文链接:https://my.oschina.net/u/1781072/blog/542639

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个字符可加载到数据,但没有筛选功能 ;

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

本文转自:http://www.cnblogs.com/mingforyou/p/3572572.html

转载于:https://my.oschina.net/u/1781072/blog/542639

上一篇:c# – 在一个WPF ComboBox中使用三种不同的ComboBoxItem样式


下一篇:c# – Combobox显示成员问题,让我发疯