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

?

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 data1
					Ext.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 data2
					Ext.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）,但我不知道具体怎么写，很囧！

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