Extjs.form.ComboBox 动态加载数据-CSDN博客

本文介绍了一种使用ExtJS框架动态加载和显示籍贯信息到ComboBox的方法。通过HTTP代理从服务器请求籍贯数据，并利用JSON读取器解析返回的数据。然后，通过本地模式将数据填充到ComboBox组件中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//小记录


// 从后台加载籍贯信息,动态加载 显示到ComboBox中 

	var httpProxy = new Ext.data.HttpProxy({
				url : "employee_queryNativePlace.action"

			});
	var create = new Ext.data.Record.create([{
				name : "regionId",
				mapping : "regionId"
			}, {
				name : "regionName",
				mapping : "regionName",
				type : "string"
			}]);

	var jsonReader = new Ext.data.JsonReader({
				totalProperty : "totalProperty", // 总记录数
				root : "root" // 所有的数据（json对象数组）
			}, create)

	var nativeStore = new Ext.data.Store({
				proxy : httpProxy,
				reader : jsonReader,
				remoteSort: false 
			});

	nativeStore.load();   //将数据加载到本地


//comboBox

   {
												layout : "form",
												columnWidth : .3,
												items : [{
													xtype : "combo",
													fieldLabel : "籍贯",
													width : 135,
													mode:'local',   //直接从本地获得数据(已通过nativeStore.load()将数据加载到本地，不需要用 remote 再从服务器获取)
													name : "enativeplace",
												//	hiddenName : "enativeplace",   //通过隐藏着值将value的值传提交到后台
												    valueField : 'regionName',
													displayField : 'regionName',
													triggerAction : "all",  //设置下拉选择,如果没设置，选中一个之后，不能再重选其他的选项
													editable : false,
													store : nativeStore,   //加载到comboBox中
													emptyText : "请选择籍贯..."

												}]
											}


//action里面的方法 
  public void queryNativePlace() {
		try {
			//PrintWriter OutPrint = this.getResponse().getWriter();
			Integer regionType = new Integer(1);

			//查詢
			List arrayList = (ArrayList) employeeService.selectNativePlace(regionType);

			ArrayList<String> nameList = new ArrayList<String>();
			for (int i = 0; i < arrayList.size(); i++) {
				TRegion tregion = (TRegion)arrayList.get(i);

				nameList.add(tregion.getRegionName());
				System.out.println("regionName = "+tregion.getRegionName());
			}

			int totalCount = arrayList.size();
			System.out.println("totalCount = " + totalCount);
			String json = JsonUtil.list2json(arrayList);

			StringBuffer buf = new StringBuffer();

			buf.append("{totalProperty:"); // totalProperty: 总共记录行数
			buf.append(totalCount);
			buf.append(",root:");
			buf.append(json);
			buf.append("}");

			OutPrint.print(buf.toString());   //以json的格式輸出,这个不能忘记
			//OutPrint.print("{}");
			System.out.println("json : " + buf.toString());
			OutPrint.print(true);

		} catch (Exception ex) {
			ex.printStackTrace();
		}
	}