最近使用ExtJS下拉列表框(ComboBox)希望完成一个动态下拉列表的功能,即列表中的数据都通过异步方式查询数据库而来,同时在用户选择了列表中的某个值后,可以从后台正确的获取用户选择项所对应的值。

这就包含了两个步骤:

1:异步方式查询数据库并渲染到ComboBox(下拉列表)中;

2:后台获取前台用户选择的列表项所对应的值;

先来看看怎样使用异步方式查询数据库并渲染到下拉列表框中去。

首先需要指定一个代理,代理的使用是为了屏蔽具体数据来源的不同,即下拉列表框中的内容既可以来自于local(内存),也可以来自于远程(remote,查询数据库等方式)。一个查询远程数据库的代理写法如下所示:

var proxy = newExt.data.HttpProxy({url:"../AjaxServlet?parameter=identityNoTag"});//指定处理Ajax请求的Servlet和参数

该代理的指定了处理请求的Servlet类为AjaxServlet,并且携带了参数parameter。代理创建完毕后需要指定每条记录的解析方式(不知道准确不准确,我是这么理解的),即创建一个Record,一个Record对应着一条记录:

var identityJSON =Ext.data.Record.create([

{name:"parameterName",type:"string",mapping:"parameterName"},//映射列

{name:"parameterValue",type:"string",mapping:"parameterValue"}//映射列

]);

该Record说明了解析JSON数据的方式,即name为parameterName,类型为字符串类型,而值的名称为parameterValue。接下来将创建一个Reader和store,其中reader负责按照Record所指定的方式读取JSON数据,而store则是用于存储解析后的数据的容器。

var reader=newExt.data.JsonReader({},identityJSON);

var store =newExt.data.Store({

proxy:proxy,

reader:reader

});

接下来的工作就是创建一个下拉列表了:

var identity = newExt.form.ComboBox({

fieldLabel: '目前身份',

name:'identity',//重要属性

hiddenName:'identity',//重要属性,后台获取值时需要

readOnly : true,

allowBlank: false,

store:store,

displayField:'parameterName',//显示给用户的字段

valueField:'parameterValue',//显示给用户的字段对应的值

typeAhead: true,

mode: 'remote',//指定数据来源为远程

triggerAction: 'all',

emptyText:'您的身份...',

selectOnFocus:true,

width:190

});

在来看看后台的查询,查询很简单,你可以使用任何查询方式来查询数据库,并将查询好的数据拼装成为JSON数据即可,其中AjaxServlet代码部分如下所示:

public void doPost(HttpServletRequest request,HttpServletResponse response){

String param = request.getParameter("parameter");

if(param!=null&&param.equals("identityNoTag")){

logger.info("开始获取身份信息!");

//返回JSON类型的数据固定为text/html,如果返回XML类型的数据此处为text/xml

response.setContentType("text/html");

response.setCharacterEncoding("UTF-8");//设置编码方式

String identity = "";//定义身份字段存储查询到的信息--JSON格式

try {

identity = new GetJSONQuery().getIdentityJSONStrNoTag();

PrintWriter out = response.getWriter();

out.println(identity);

out.flush();

out.close();

} catch (IOException e1) {

logger.error("获取输出流失败!"+e1);

} catch (Exception e) {

logger.error("获取身份信息失败!"+e);

}

}

}

其中getIdentityJSONStrNoTag方法如下:

/**

* 查询数据库参数表中的用户身份信息封装成为JSON格式的字符串

* @return

* @throws Exception

*/

public String getIdentityJSONStrNoTag() throws Exception{

HQLDAO dao  = DAOUtil.getHQLDAO();

StringBuffer identity = new StringBuffer();

identity.append("[");

List<Parameter> queryResult = dao.queryListByQL("select param from Parameter param where parameterKey='identity'");

for(Parameter parameter:queryResult){

identity.append("{parameterName:'"+parameter.getParameterName()+"',");

identity.append("parameterValue:'"+parameter.getParameterValue()+"'},");

}

identity.deleteCharAt(identity.length()-1);//去掉最后一个逗号

identity.append("]");

logger.info("返回的身份信息如下:"+identity.toString());

return identity.toString();

}

使用的Hibernate查询的数据库(查询数据库就不多介绍了,有需要的可以上网查找相关资料),并封装成为了JSON数据,一个封装好的JSON数据如下所示:

[{parameterName:'皇帝',parameterValue:'sf01'},{parameterName:'后宫佳丽',parameterValue:'sf02'},{parameterName:'王公大臣',parameterValue:'sf03'},{parameterName:'太监宫女',parameterValue:'sf04'},{parameterName:'系统管理员',parameterValue:'sf05'}]

接下来我们需要做的就是在后台去获取用户选择的列表项所对应的值,初学EXTJS时包括我在内的许多人都遇到了这样的一个问题:后台能获取到前台下拉列表项显示的字段,却不能获取到显示的字段所对应的值!

产生这个问题是由于ExtJS中的ComboBox具体实现时是通过n多个<div>标签来实现的,代码如下,而一个表单是需要一个类似<input>标签才能将值提交到后台的,而不是<div>标签,所以这就造成了后台没法获取显示的字段对应的值。这时就需要设置一个hiddenName字段,代码如前所示。这样ExtJS会给ComboBox增加一个<input>标签用于提交选中项的值。而后台为了获取前台提交的值,只需要设置一个变量,变量名为hiddenName所指定的值即可。

一个ComboBox标签解析成为Html后如下代码:

<divid="ext-gen231" class="x-layer x-combo-list "style="position: absolute; z-index: 11000; visibility: visible; left:752px; top: 285px; width: 188px; height: 105px;">

<div id="ext-gen233"class="x-combo-list-inner" style="width: 188px; overflow: auto;height: 105px;">

<div id="ext-gen243"class="x-combo-list-item ">

皇帝

</div>

<div class="x-combo-list-item">

后宫佳丽

</div>

<div id="ext-gen275"class="x-combo-list-item ">

王公大臣

</div>

<div class="x-combo-list-item">

太监宫女

</div>

<div class="x-combo-list-itemx-combo-selected">

系统管理员

</div>

</div>

</div>

综上两个问题都解决啦!一个下拉列表跃然屏幕!

ExtJS下拉列表使用方法(异步传输数据)的更多相关文章

  1. Excel 2013中单元格添加下拉列表的方法

    使用Excel录入数据的时候我们通常使用下拉列表来限定输入的数据,这样录入数据就很少发生错误了.Excel 2013较以前的版本发生了很大的变化,那么在Excel 2013是如何添加下拉列表的呢? 下 ...

  2. 使用getScript()方法异步加载并执行js文件

    使用getScript()方法异步加载并执行js文件 使用getScript()方法异步请求并执行服务器中的JavaScript格式的文件,它的调用格式如下所示: jQuery.getScript(u ...

  3. 使用getJSON()方法异步加载JSON格式数据

    使用getJSON()方法异步加载JSON格式数据 使用getJSON()方法可以通过Ajax异步请求的方式,获取服务器中的数组,并对获取的数据进行解析,显示在页面中,它的调用格式为: jQuery. ...

  4. 使用load()方法异步请求数据

    使用load()方法通过Ajax请求加载服务器中的数据,并把返回的数据放置到指定的元素中,它的调用格式为: load(url,[data],[callback]) 参数url为加载服务器地址,可选项d ...

  5. Spring开启方法异步执行

    @EnableAsync @Target(ElementType.TYPE) @Retention(RetentionPolicy.RUNTIME) @Documented @Import(Async ...

  6. AOP +FreeSql 跨方法异步事务

    AOP +FreeSql 跨方法异步事务 Autofac.Extensions.DependencyInjection Autofac.Extras.DynamicProxy Castle.Core. ...

  7. MyEclipse 编写 ExtJS 卡死问题解决方法

    MyEclipse 8.6  在 jsp 中编写 ExtJS时,会出现卡死现象,让人甚是头疼.网上找了很多方法,折腾半天,还是不管用. 什么MyEclipse 优化,Validation 取消,MyE ...

  8. VB.NET中使用代表对方法异步调用

    按照我们常规的思维方式,计算机应该是干完一件事,然后再干下一件.用术语来说,这种执行任务的方式叫做同步执行(Synchronous Execution).既然这样,那么为什么要引入异步执行的概念呢? ...

  9. parallel方法 异步并行执行

    Promise提供了all方法, 但是状态只有2种, 第一种是所有promise实例都成功则返回值组成一个数组,传递给p的回调函数: 第二种是有一个实例被rejected,状态就变成rejected, ...

随机推荐

  1. 购物单:Excel的应用

    题目描述: 小明刚刚找到工作,老板人很好,只是老板夫人很爱购物.老板忙的时候经常让小明帮忙到商场代为购物.小明很厌烦,但又不好推辞. 这不,XX大促销又来了!老板夫人开出了长长的购物单,都是有打折优惠 ...

  2. C++ 学习笔记之——STL 库 vector

    vector 是一种顺序容器,可以看作是可以改变大小的数组. 就像数组一样,vector 占用连续的内存地址来存储元素,因此可以像数组一样用偏移量来随机访问,但是它的大小可以动态改变,容器会自动处理内 ...

  3. 用命令从mysql中导出/导入表结构及数据

    在命令行下mysql的数据导出有个很好用命令mysqldump,它的参数有一大把,可以这样查看:mysqldump最常用的:mysqldump -uroot -pmysql databasefoo t ...

  4. es6从零学习(一)let 和 const 命令

    es6从零学习(一):let 和 const 命令 一:let 变量 1.块级作用域{}:let只在自己的块级作用域内有效. for(let i =0;i<3;i++) { console.lo ...

  5. Bad Cowtractors(最大生成树)

      Description Bessie has been hired to build a cheap internet network among Farmer John's N (2 <= ...

  6. 王者荣耀交流协会beta冲刺贡献分分配结果

    根据原来约定的(贡献分分配规则){http://www.cnblogs.com/gaoyb348/p/7828523.html} 总共20个任务,一共35分,那么一个任务1.75分. 冉华完成了9个任 ...

  7. Tomcat服务器学习和使用(一)

    一.Tomcat服务器端口的配置 Tomcat的所有配置都放在conf文件夹之中,里面的server.xml文件是配置的核心文件. 如果想修改Tomcat服务器的启动端口,则可以在server.xml ...

  8. PAT L1-044 稳赢

    https://pintia.cn/problem-sets/994805046380707840/problems/994805086365007872 大家应该都会玩“锤子剪刀布”的游戏:两人同时 ...

  9. linux 相关的问题

    1,查找当前目录下的文件名,并重定向到文件t中 ls > t mac 下快速补全目录名快捷键tab

  10. Pandas速查手册中文版(转)

    关键缩写和包导入 在这个速查手册中,我们使用如下缩写: df:任意的Pandas DataFrame对象 同时我们需要做如下的引入: import pandas as pd 导入数据 pd.read_ ...