我看了很多文章關(guān)于這方面的文章，但都是只有前端沒有后臺(tái)的，導(dǎo)致在后臺(tái)返回的數(shù)據(jù)格式一直不正確，在自己多次摸索后終于成功做出來了，現(xiàn)在就和大家分享一下。

實(shí)現(xiàn)效果：

廢話不多說，直接上代碼！

Ext代碼：

var buyTypeStore = new Ext.data.Store({fields: ["text", "value"],proxy: {type: "ajax",url: doLoadItemCatUrl,actionMethods: {read: "POST" //解決傳中文參數(shù)亂碼問題，默認(rèn)為“GET”提交},reader: {type: "json", //返回?cái)?shù)據(jù)類型為json格式root: "root" //數(shù)據(jù)}},autoLoad: true //自動(dòng)加載數(shù)據(jù)});var form = new Ext.form.Panel({// width: 400,// height: 300,border : false,// margin: "100 0 0 200", //邊距bodyPadding: 10,// renderTo: Ext.getBody(), //顯示到頁面上items: [{xtype: "combo",id: "buyType",hiddenName: "buyType", //hiddenName和id不要相同，在IE6中會(huì)顯示錯(cuò)位。store: buyTypeStore,displayField: "text",valueField: "value",triggerAction: "all",// mode : "remote",queryMode: "local", //低版本使用mode屬性editable: true,allowBlank: false,value: "請(qǐng)?zhí)顚戭惸?#34;,fieldLabel: "選擇類目<label style='color: red;'>*</label>",typeAhead: true,//設(shè)置為true，當(dāng)開始輸入字符時(shí)，在指定的延遲之后會(huì)自動(dòng)匹配剩下的內(nèi)容，如果找到了匹配的 內(nèi)容則自動(dòng)選中它 (typeAheadDelay) (默認(rèn)值為 false)listeners: {"select": function () {//獲得顯示的值和實(shí)際的提交值var name = Ext.getCmp("buyType").getRawValue();var pid = Ext.getCmp("buyType").getValue();$("#cid").show();$("#cid").html(name);// Ext.Msg.alert("提示", "顯示的值：" + name + "\r\n實(shí)際的提交值：" + value);}}}]});//裝表單的窗口extWin = new Ext.window.Window({title: "選擇類目",closeAction: "hide",// modal: true, //遮罩 :就是讓form表單以外不能編輯constrain: true, //限制拖動(dòng)范圍resizable: true, //可調(diào)整大小的; 可變尺寸的bodyPadding: 10,border: false,buttonAlign: "center", //按鈕顯示位置layout: "fit",items: [form], //裝表單進(jìn)來listeners: {"close": function () {//點(diǎn)擊右上角的關(guān)閉按鈕，就清空formform.getForm().reset();}}});});

后臺(tái)返回的數(shù)據(jù)格式如下： {root=[{text=平板電腦配件, value=0}, {text=臺(tái)式機(jī), value=1}, {text=服務(wù)器/工作站, value=2}]}
后臺(tái)核心代碼：

public Map<String,Object> queryCats(){List<ItemCat> catList = queryItemCat();List list = new ArrayList();//:[["平板電腦配件"],["臺(tái)式機(jī)"],["服務(wù)器/工作站"],["筆記本配件"],["電腦配件"]]//{'root': [{'text':'合約機(jī)', value:'1'},{'text':'裸機(jī)', value:'0'}]}for(int i=0; i < catList.size(); i++){Map<String,Object> map = new HashMap<>();map.put("text",catList.get(i).getName());map.put("value",String.valueOf(i));list.add(i,map);}Map<String,Object> map = new HashMap<>();map.put("root",list);return map; }

總結(jié)

以上是生活随笔為你收集整理的Ext之Combobox的远程加载数据实例（附前后台代码）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。