Extjs 后台读取数据的下拉框

今天参照项目里的列子写了个远程获取数据的下拉框

?

js部分代码如下

Ext.onReady(function() {var newStore = new Ext.data.SimpleStore({fields : ['key', 'value']});new Ext.Panel({width : 500,height : 300,applyTo : 'show',bodyStyle : 'padding:10px',layout : 'table',layoutConfig : {border : '10px',columns : 2},items : [{html : '下步工作:'}, new Ext.form.ComboBox({id : 'aaa',store : newStore,displayField : 'value',mode : 'local',typeAhead : true,forceSelection : true,triggerAction : 'all',emptyText : '请选择 .... ',selectOnFocus : true})],tbar : new Ext.Toolbar({items : [{xtype : 'button',text : 'data1',// cls:'blist',handler : function(e) {// init data1Ext.Ajax.request({params : {param : 'a'},url : './servlet/DataServlet',success : function(response) {newStore.removeAll();var result = Ext.util.JSON.decode(response.responseText);for (var i = 0; i < result.length; i++) {var item = new Object();item.key = result[i].key;item.value = result[i].value;newStore.add(new Ext.data.Record(item));}//清除下拉框已选值，不知道怎么写，谁知道把这代码补下，谢谢 },failure : function() {alert("handler failure ");}});}}, {xtype : 'button',text : 'data2',// cls:'blist',handler : function() {// init data2Ext.Ajax.request({params : {param : 'b'},url : './servlet/DataServlet',success : function(response) {newStore.removeAll();var result = Ext.util.JSON.decode(response.responseText);for (var i = 0; i < result.length; i++) {var item = new Object();item.key = result[i].key;item.value = result[i].value;newStore.add(new Ext.data.Record(item));}               //清除下拉框已选值，不知道怎么写，谁知道把这代码补下，谢谢 },failure : function() {alert("handler failure ");}});}}]})});});

?

?

后台servlet代码如下?

public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {String param = request.getParameter("param");StringBuffer jsonStr = new StringBuffer();if(param.equals("a")){ //返回 A 类jsonStr.append("[");jsonStr.append("{key:'a1',value:'jack1'}");jsonStr.append(",{key:'a2',value:'jack2'}");jsonStr.append(",{key:'a3',value:'jack3'}");jsonStr.append(",{key:'a4',value:'jack4'}");jsonStr.append(",{key:'a5',value:'jack5'}");jsonStr.append("]");}else{  //返回 B 类jsonStr.append("[");jsonStr.append("{key:'b1',value:'age1'}");jsonStr.append(",{key:'b2',value:'age2'}");jsonStr.append(",{key:'b3',value:'age3'}");jsonStr.append(",{key:'b4',value:'age4'}");jsonStr.append(",{key:'b5',value:'age5'}");jsonStr.append("]");}request.setAttribute("json", jsonStr.toString());request.getRequestDispatcher("../json.jsp").forward(request, response);}

?

json.jsp代码如下

?

<%=request.getAttribute("json") %>

?

?

实现的功能很简单，就是点工具栏上的两个按钮，下拉框分别加载两类不同的数据做为下拉选项。这代码基本上也能实现动态加载下拉框选项数据的功能。

比较糟的是，数据格式用的是 数组+json ，其实我知道数据格式完全可以用数组就好（而 newStore 的类型也换成? Ext.data.ArrayStore）,但我不知道具体怎么写，很！

先留在这里吧，至少功能实现了，以后再来改