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很是強大，越學習，越能發現它的魅力所在。