Ext JS

Combobox 

加载下拉框数据

点击下拉框，数据从后台加载，是很常见的需求。如下图：

View 中下拉框

dockedItems : [ {
	dock : 'top',
	xtype : 'toolbar',
	items : [ {
		xtype : 'combobox',
		name : 'currYear',
		fieldLabel : '年度',
		labelAlign : 'right',
		labelWidth : 30,
		width : 100,
		emptyText : '',
		editable : false,
		margin : '5 5 5 5',
		displayField : 'year',// 显示值，因 model 中有一个 year 属性，所以数据返回到页面上，将显示值和真值，都设置为 year 字段值
		valueField : 'year',// 真值
		store : 'jsxm.yearStore',
	}
]

　　

Store

Ext.define('MyApp.store.jsxm.yearStore', {
	extend : 'Ext.data.Store',
	model : 'MyApp.model.jsxm.yearModel',
	proxy : {
		type : 'ajax',
		url : 'jsxmAction!getYears',
		reader : {
			type : 'json',
			root : 'years'// {"years":[{"year":"全部"},{"year":"2017"},{"year":"2016"},{"year":"2015"}]}
		}
	},
	autoLoad : false
});

Model

Ext.define('MyApp.model.jsxm.yearModel', {
	extend : 'Ext.data.Model',
	fields : [ {
		name : 'year',
		type : 'string'
	} ]
});

后台方法

public void getYears() {
	QueryDataSource qds = new QueryDataSource();// 公司接口
	try {
		// 公司接口，查询表中 noyear 字段的值
		ArrayList<String> yearList = qds.queryObjectProperty("cg_jsxm_hp", "noyear", true, "1=1 order by noyear desc");
		System.out.println(yearList);// [2017, 2016, 2015, 2014, 2013, 2012, 2011, 2010, 2009, 2008]
		ArrayList<HashMap> list = new ArrayList<HashMap>();
		HashMap<String, String> map = new HashMap<String, String>();
		map.put("year", "全部");
		list.add(map);// 第一个 map 放进 list 中，[{year=全部}]
		for (String year : yearList) {
			HashMap<String, String> hashMap = new HashMap<String, String>();
			hashMap.put("year", year);
			list.add(map);
		}
		JSONArray jsonArray = JSONArray.fromObject(list);
		String data = "{"years":" + jsonArray.toString() + "}";// 组装 json 数据，store 中有 reader: {type: 'json', root: 'years'}，root 要对应起来
		System.out.println(data);// {"years":[{"year":"全部"},{"year":"2017"},{"year":"2016"},{"year":"2015"}]}
		send(data);// 封装的方法 public void send(String s){ServletActionContext.getResponse().getWriter().write(s)};
	} catch (Exception e) {
		e.printStackTrace();
	}
}

　　

封装的 send 方法

public void send(String s) {
	try {
		HttpServletResponse response = ServletActionContext.getResponse();
		response.setCharacterEncoding("UTF-8");
		response.setContentType("text/html;charset=UTF-8");
		response.getWriter().write(s);
	} catch (Exception e) {
		e.printStackTrace();
	}
}

执行方法后，返回数据：

级联下拉框

Ext.define('MyApp.view.hdjg.hzzhdView', {
	extend : 'Ext.grid.Panel',
	alias : 'widget.hzzhdView',
	id : 'hzzhdView',
	layout : 'fit',
	simpleSelect : false,
	store : 'hdjg.hzzhdStore',
	autoScroll : true,
	initComponent : function(){
		
		Ext.define('hdmcModel', {
			extend : 'Ext.data.Model',
			fields : [ {
				type : 'String',
				name : 'text'
			}, {
				type : 'String',
				name : 'value'
			} ]
		});
		
		// hdmcStore 作为 hdmc 下拉框的 Store
		var hdmcStore = Ext.create('Ext.data.Store', {
			model : 'hdmcModel',
			listeners : {
				'beforeload' : function() {
					var grid = Ext.getCmp('hzzhdView');
					var tableName = 'hzz_hdydjcxx';// 实际项目里，两处（查询的表不同）用到 proxy 下的方法，所以，这里将需要查询的表，也作为参数传递进去。
					if (grid) {
						Ext.apply(this.proxy.extraParams, {
							// 取参数
							xsqmc : grid.down('combobox[name="xsqmc"]').getValue(),
							tableName : tableName
						});
					}
				}
			},
			proxy : {
				type : 'ajax',
				url : 'hdjgAction!getHdmcByXsqmc'// 级联
				// 此处没有 reader 配置，无所谓，后台数据直接传一个数组即可，这里有 reader 配置的话，后台组装下 json 字符串即可，很简单。
			},
			autoLoad : true
		});
		
		this.columns = [];// 此处代码省略
		
		// 停靠组件部分> 搜索条件工具栏
		this.dockedItems = [ {
			dock : 'top',
			xtype : 'toolbar',
			autoShow : true,
			enableOverflow : true,
			layout : {
				overflowHandler : 'Menu'// items太多溢出处理
			},
			items : [ {
				xtype : 'combobox',
				name : 'xsqmc',
				fieldLabel : '县区市',
				labelAlign : 'right',
				labelWidth : 40,
				width : 180,
				editable : false,
				emptyText : '<县区市名称>',
				store : [ '全部', '市级', '海曙区', '江北区', '镇海区', '北仑区', '鄞州区',
						'奉化区', '余姚市', '慈溪市', '宁海县', '象山县', '杭州湾新区',
						'大榭开发区', '高新区', '东钱湖旅游度假区', '典型示范河道' ],
						
				listeners : {
					// 监听 combobox 的 select 事件，在函数里执行加载 需要级联的 combobox 的操作
					'select' : function(combo, record, index) {
						var relativeCombo = Ext.getCmp("hdmcStoreId");
						relativeCombo.value = "";// 加载之前把，下拉框值设为 ''，则会先显示 hdmcStore 的 emptyText，加载完成后，显示完整 combobox 数据
						relativeCombo.store.load();
					}
				}
			
			}, {
				xtype : 'combobox',
				id : 'hdmcStoreId',// 当前下拉框组件'id'
				store : hdmcStore,
				name : 'hdmc',
				fieldLabel : '河道名称',
				labelWidth : 60,
				width : 280,
				displayField : 'text',
				valueField : 'value',
				emptyText : '请选择<河道名称>',
				editable : false
			} ]
		} ];
		this.callParent(arguments);
	}
});

public void getHdmcByXsqmc() {
	String type = this.tableName;
	ArrayList<TextAndValue> list = new ArrayList<TextAndValue>();
	TextAndValue temp = new TextAndValue();// 就是一实体类，属性 text、value、getter && setter方法
	temp.setText("全部");
	temp.setValue("");
	list.add(temp);
	
	if (xsqmc != null && !"".equals(xsqmc)) {
		try {
			QueryDataSource qds = new QueryDataSource();
			String sql = "select distinct hdmc from "+ type +" where 1=1 and xsqmc = '" + xsqmc + "'";
			ArrayList<HashMap<Object, Object>> arrayList = qds.queryDBSQL(sql);
			System.out.println(arrayList);// [{HDMC=梅梁桥河}, {HDMC=槐路河}, {HDMC=黄家门前河}, {HDMC=姚江(蜀山大闸-城山渡渡口)}, {}, {}...]
			for(HashMap<Object, Object> map: arrayList){
				TextAndValue textAndValue = new TextAndValue();
				textAndValue.setText(map.get("HDMC").toString());
				textAndValue.setValue(map.get("HDMC").toString());
				list.add(textAndValue);
			}
		} catch (Exception e) {
			// TODO: handle exception
			e.printStackTrace();
		}
	}
	String data = JSONArray.fromObject(list).toString();// [{"text":"全部","value":""},{"text":"梅梁桥河","value":"梅梁桥河"}, {}, {}...]
	send(data);// 将 list 转为 json 字符串对象，然后直接返回到客户端
}

// 如果 store 的 proxy 配置里，有 reader 配置的话，则组装下 json 即可，没有配置 reader 的话，直接返回数组也是可以的。
reader: {
	type: 'json',
	root: 'riverName'
}
String data = "{"riverName":" + JSONArray.fromObject(list).toString() + "}";
send(data);// {"riverName": [{"text":"全部","value":""},{"text":"梅梁桥河","value":"梅梁桥河"}, {}, {}...]}

　　

页面效果：

点击 县区市 下拉框后，发现，河道名称 下拉框发生了变化，级联操作，没毛病。