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

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;”>

皇帝

後宮佳麗

王公大臣

太監宮女

系統管理員

綜上兩個問題都解決啦!一個下拉列表躍然屏幕!

發佈留言