ExtJs 可查询的下拉框

　　最近项目中有个需求，就是有四个模块需要加载一个主表的内容，比如说这个表叫项目表（比如项目表里有两个字段一个是项目ID--projCd,还有一个是项目名称--projNm）。主表的内容的要放在一个下拉框里选择。当然他的特别之处在于，项目太多，需要一个满足可以查询的下拉框来匹配项目名称。由于有多处地方要用，所以我把生成这个下拉框的JS做了一下封装，需要传入模块各自的查询Action的URL，还有各模块对应表里项目ID的字段名称（用来传参数）等等。

　　可喜可贺的是项目中用了ExtJS，不必四处去搜罗JQuery插件了。那么以下代码是如何实现ExtJS的下拉框查找。

     具体参数见下面代码的注释，一目了然。

　　介绍业务：选择一个项目进行验收，在验收的添加页面加载持有项目信息的下拉框，获取下拉框选中的项目ID，添加到项目验收表中。

表单一：生成下拉框的js文件

/**
 * 构造项目下拉框
 * 贞心真义
 * @param url   action查询地址
 * @param selectValue  默认选中
 * @param renderTo     下拉框Id
 * @param hiddenName   projCd
 */
function InitDropDownListExt(url,selectValue,renderTo,hiddenName){        
    var store = new Ext.data.JsonStore({
        url:url,     
        fields: ['proCd','proNm'],
        root:'data'
    });
    var combo = new Ext.form.ComboBox({
        store: store,
        displayField:'proNm',
        valueField: "proCd",
        typeAhead: true,
        triggerAction: 'all',
        selectOnFocus:true,
        applyTo: renderTo,
        value:selectValue,
        hiddenName : hiddenName, //对应关联表中的项目ID，作为传参数用的
        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;  
                }  
            }  
        }  
    });
}

 　　使用方法如下：

表单二：html(当然，页面需要引用上面的Js文件)

<input style="width: 400px" type="text" id="pro" /> <!-- 下拉框要生成的input -->

 

表单三：JavaScript

Ext.onReady(function(){
    //初始化项目的信息 
    var proSelObj=$('#pro');
    var procdsel='${关联表.projCd}';
    if(procdsel==null||procdsel==""){
        //加载符合要求的项目
        InitDropDownListExt("<%=basePath%>查询action对应的URL.action","","pro","关联表.projCd");
    }
});

     以上就是ExtJs的可查询下拉框的实现方式，ExtJs非常强大，越学习，越能发现它的魅力所在。