脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-ExtJS ComboBox下拉列表框使用详解，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

最近使用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',//重要属性，后台获取值时需要

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 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'}]

<"/kf/ware/vc/" target="_blank" class="keylink">vcD4KPHA+vdPPwsC0ztLDx9Do0qrX9rXEvs3Kx9TauvPMqMilu/HIodPDu6fRodTxtcTB0LHtz+7L+bbU06a1xCYjMjA1NDA7o6yz9dGnRVhUSlPKsbD8wKjO0tTaxNq1xNDttuDIY7a80/a1vcHL1eLR+bXE0ru49s7KzOKjurrzzKjE3LvxyKG1vcewzKjPwsCtwdCx7c/uz9TKvrXE19a2zqOsyLSyu8Tcu/HIobW9z9TKvrXE19a2zsv5ttTTprXEJiMyMDU0MDujoTwvcD4KPHA+svrJ+tXiuPbOysziysfTydPaRXh0SlPW0LXEQ29tYm9Cb3i+38zlyrxp1sqxysfNqLn9brbguPY8ZGl2PrHqx6nAtMq1z9a1xKOstPrC68jnz8KjrLb40ru49rHttaXKx9Do0qrSu7j2wOamizIwMjg0OzxpbnB1dD6x6sepssXE3L2rJiMyMDU0MDvM4b27tb2688yotcSjrLb4srvKxzxkaXY+serHqaOsy/nS1NXivs3U7LPJwcu688yow7u3qLvxyKHP1Mq+tcTX1rbOttTTprXEJiMyMDU0MDuhozxzdHJvbmc+1eLKsb7N0OjSqsno1sPSu7j2aGlkZGVuTmFtZDFWts48L3N0cm9uZz6jrLT6wuvI58ewy/nKvqGj1eLR+UV4dEpTu+G4+envbWJvQm941Pa809K7uPY8aW5wdXQ+serHqdPD09rM4b270aHW0M/utcQmIzIwNTQwO6Gjtvi688yozqrBy7vxyKHHsMyozOG9u7XEJiMyMDU0MDujrNa70OjSqsno1sPSu7j2seTBv6OsseTBv8P7zqpoaWRkZW5OYW1ly/nWuLaotcQmIzIwNTQwO7y0v8mhozwvcD4KPHA+PC9wPgo8cD7Su7j2Q29tYm9Cb3ix6sepveLO9rPJzqpIdG1suvPI58/CtPrC66O6PC9wPgo8cD48ZGl2aWQ9"ext-gen231" class="x-layer x-combo-list "style="position: absolute; z-index: 11000; visibility: visible; left:752px; top: 285px; width: 188px; height: 105px;">

皇帝

后宫佳丽

王公大臣

太监宫女

系统管理员

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

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！&nbsp;js脚本，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-ExtJS ComboBox下拉列表框使用详解全部内容，希望文章能够帮你解决javascript代码实例教程-ExtJS ComboBox下拉列表框使用详解所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。