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非常强大,越学习,越能发现它的魅力所在。
ExtJs 可查询的下拉框的更多相关文章
- MVC联想查询绑定下拉框
前言 在做搜索时,输入些内容时需要弹出下拉框给用户进行选择,极大的方便了用户,会给用户带来不一样的体验 Controller public ActionResult SSAC(string UserN ...
- JQuery打造下拉框联动效果
做联动效果,若是用纯JavaScript来做,往往须要辅助页面保存须要刷新的结果集,然后渲染到原页面.考虑将须要动态刷新的内容自己主动拼接到前一个下拉框之后,当前一个下拉框onchange后,同级的后 ...
- Jquery-EasyUI combobox下拉框使用
制作一个json文件: <input data-options="url:'${pageContext.request.contextPath }/json/combobox_data ...
- ExtJs 下拉单联动,次级下拉框查询模式
queryMode : 'local' 如果下拉框的值是本地数据,最好设定queryMode为local,这样可以提高用户的响应速度
- Extjs 中combobox下拉框初始化赋值
近日在工作中遇到一个需求,要求页面初始化的时候给dataGrid表插入一条数据. 前端使用的是Extjs框架,dataGrid表有四列,其中三列是类型为textbox,普通文本框,另外一列类型是com ...
- Jquery+Ajax下拉框级联查询
- Extjs 下拉框下拉选项为Object object
使用Extjs的下拉框出现下拉选项为Object object的问题. 原因在于对store属性提供的是data信息,而不是store对象
- portal开发"下拉框"“日期框”查询要怎么配置
下面的这些是我今天的成果! 总的来说是一步一步摸索出来的!还是等感谢超哥的耐心指导,犯了一些错误! 1.比如在wd配置文件中中写id=“check_it_two”,在java中写成 checki_it ...
- Ajax实现在textbox中输入内容,动态从数据库中模糊查询显示到下拉框中
功能:在textbox中输入内容,动态从数据库模糊查询显示到下拉框中,以供选择 1.建立一aspx页面,html代码 <HTML> <HEAD> <title>We ...
随机推荐
- Troubleshoot Refused VNC Connection in CentOS 7
Troubleshoot Refused VNC Connection in CentOS 7 Posted on March 15, 2015 by Istvan Szarka — 2 Commen ...
- 大熊君说说JS与设计模式之------中介者模式Mediator
一,总体概要 1,笔者浅谈 我们从日常的生活中打个简单的比方,我们去房屋中介租房,房屋中介人在租房者和房东出租者之间形成一条中介.租房者并不关心他租谁的房.房东出租者也不关心他租给谁.因为有中介的存在 ...
- REST API 安全设计指南
0x01 REST API 简介 REST的全称是REpresentational State Transfer,表示表述性无状态传输,无需session,所以每次请求都得带上身份认证信息.rest是 ...
- C++11 并发指南系列
本系列文章主要介绍 C++11 并发编程,计划分为 9 章介绍 C++11 的并发和多线程编程,分别如下: C++11 并发指南一(C++11 多线程初探)(本章计划 1-2 篇,已完成 1 篇) C ...
- 深入理解java虚拟机【内存溢出实例】
通过简单的小例子程序,演示java虚拟机各部分内存溢出情况: (1).java堆溢出: Java堆用于存储实例对象,只要不断创建对象,并且保证GC Roots到对象之间有引用的可达,避免垃圾收集器回收 ...
- [游戏学习24] MFC 各种绘图 字体学习
>_<:这里包含字体设置及各种绘图,只要稍微看一下代码就能理解,这里不多介绍 >_<:Hello.h #include<afxwin.h> class CMyApp ...
- [BTS] Exception occurred when persisting state to the database
Error 1 Uncaught exception (see the 'inner exception' below) has suspended an instance of service 'J ...
- javascript中对象函数继承的概念
什么是函数对象?这个对象既是通常意义上的对象,又可以加上括号直接执行的函数. 产生函数对象的方式有两种:1.通过function关键字产生:var fn = function(){};2.实例化Fun ...
- ubuntu下firefox无法看bilibili解决方案
突然发现,在ubuntu中使用firefox打开bilibili网站无法加载视频与弹幕,在网上搜到的可能的问题为:linux下的firefox使用的flash player是老版本,bilibili不 ...
- CSS3实现的超酷动态圆形悬浮效果
在线演示 本地下载 了解代码是如何开发的? 请参考并且播放如下代码轻视频: http://www.gbtags.com/gb/rtreplayerpreview/151.htm