posts - 111,  comments - 486,  trackbacks - 0

  最近项目中有个需求,就是有四个模块需要加载一个主表的内容,比如说这个表叫项目表(比如项目表里有两个字段一个是项目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非常强大,越学习,越能发现它的魅力所在。

posted on 2015-01-27 15:43  贞心真义  阅读(...)  评论(...编辑  收藏