Ext ComboBox 动态查询

2019-09-08 23:06:05 阅读：236 来源： 互联网

标签：name ComboBox 查询 Ext var new true id

原文链接：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

标签：name,ComboBox,查询,Ext,var,new,true,id
来源： https://blog.csdn.net/chidou1692/article/details/100641400

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Ext ComboBox 动态查询