extjs 下拉日期_ExtJs 可查询的下拉框

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

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

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

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

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

/**

* 构造项目下拉框

* 贞心真义

* @param url action查询地址

* @param selectValue 默认选中

* @param renderTo 下拉框Id

* @param hiddenName projCd*/

functionInitDropDownListExt(url,selectValue,renderTo,hiddenName){var store = newExt.data.JsonStore({

url:url,

fields: ['proCd','proNm'],

root:'data'});var combo = newExt.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);returnregExp.test(text);

});

combo.expand();return false;

}

}

}

});

}

使用方法如下：

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

表单三：JavaScript

Ext.onReady(function(){//初始化项目的信息

var proSelObj=$('#pro');var procdsel='${关联表.projCd}';if(procdsel==null||procdsel==""){//加载符合要求的项目

InitDropDownListExt("查询action对应的URL.action","","pro","关联表.projCd");

}

});

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