我所收集的几种ComboBox填充方式

我所收集的几种ComboBox填充方式： 第一种：数组 var data = [['1', 'Lislie', 'D005', 'male'], ['2', 'Merry', 'D004', 'female'], ['3', 'Edison', 'D003', 'male'], ['4', 'Mark', 'D002', 'male'], ['5', 'Leeon', 'D001', 'male']]; // 格式化数据 var ds = new Ext.data.Store({ proxy : new Ext.data.MemoryProxy(data), // 数据源 reader : new Ext.data.ArrayReader({}, [ // 如何解析 { name : 'id' }, { name : 'name' }, { name : 'depno' }, { name : 'sex' }]) }); ds.load(); //这一句很关键，表是打开页面就加载 this.storeList = new Ext.form.ComboBox({ store : ds, fieldLabel : 'dfsfsd', allowBlank : false, forceSelection : true, valueField : 'id', // option.value displayField : 'name', // option.text typeAhead : true, triggerAction : 'all', emptyText : 'Select a store...', mode : 'local', //如果前面用了load，那么这里就应该用local,默认为remote selectOnFocus : true, width : 135 }); 第二种：本地(内存)简单Json数据 var folders = [{ 'folderId' : '1', 'folderName' : '收信箱' }, { 'folderId' : '2', 'folderName' : '发信箱' }]; //用于下拉列表的store var foldersJsonStore = new Ext.data.SimpleStore({ fields: [{ name: 'folderId', mapping: 'folderId' }, { name: 'folderName', mapping: 'folderName' }], data: folders }); foldersJsonStore.loadData(folders); this.combo = new Ext.form.ComboBox({ fieldLabel : '文件夹', name : 'folderMoveTo', displayField : 'folderName', valueField : 'folderId', typeAhead : true, // 自动将第一个搜索到的选项补全输入 triggerAction : 'all', emptyText : '全部', selectOnFocus : true, forceSelection : true, store : foldersJsonStore, typeAhead : true, lazyInit : false, lazyRender : false, mode : 'local' }); 第三种：动态简单Json数据 // 用于下拉列表的store var foldersJsonStore = new Ext.data.SimpleStore({ proxy : new Ext.data.HttpProxy({ url : './jsp/comboxdata.jsp' }), // 数据源 fields : [{ name : 'folderId', mapping : 'folderId' }, { name : 'folderName', mapping : 'folderName' }] }); this.combo = new Ext.form.ComboBox({ fieldLabel : '文件夹', name : 'folderMoveTo', displayField : 'folderName', valueField : 'folderId', typeAhead : true, // 自动将第一个搜索到的选项补全输入 triggerAction : 'all', emptyText : '全部', selectOnFocus : true, forceSelection : true, store : foldersJsonStore, typeAhead : true, lazyInit : false, lazyRender : false, mode : 'remote' //这里的参数要注意 }); comboxdata.jsp: <%@ page language="java" import="java.util.*,com.googlecode.jsonplugin.JSONUtil"%> <% List list = new ArrayList(); HashMap hm = new HashMap(); hm.put("folderId", "1"); hm.put("folderName", "11111111111"); list.add(hm); hm = new HashMap(); hm.put("folderId", "2"); hm.put("folderName", "2222222222222"); list.add(hm); try { String json = JSONUtil.serialize(list); out.print(json); } catch (Exception ex) { ex.printStackTrace(); } %> 第四种：JsonReader读取到的数据 // 用于下拉列表的store var foldersJsonStore = new Ext.data.Store({ proxy : new Ext.data.HttpProxy({ url : './jsp/comboxdata.jsp' }), // 数据源 reader : new Ext.data.JsonReader({}, ['folderId', 'folderName']) }); this.combo = new Ext.form.ComboBox({ fieldLabel : '文件夹', name : 'folderMoveTo', displayField : 'folderName', valueField : 'folderId', typeAhead : true, // 自动将第一个搜索到的选项补全输入 triggerAction : 'all', emptyText : '全部', selectOnFocus : true, forceSelection : true, store : foldersJsonStore, typeAhead : true, lazyInit : false, lazyRender : false, mode : 'remote' }); comboxdata.jsp: <%@ page language="java" import="java.util.*,com.googlecode.jsonplugin.JSONUtil"%> <% List list = new ArrayList(); HashMap hm = new HashMap(); hm.put("folderId", "1"); hm.put("folderName", "11111111111"); list.add(hm); hm = new HashMap(); hm.put("folderId", "2"); hm.put("folderName", "2222222222222"); list.add(hm); try { String json = JSONUtil.serialize(list); out.print(json); } catch (Exception ex) { ex.printStackTrace(); } %> 第五种：ScriptTagProxy方式取得的数据 // construct the ComboBox's DataStore var dsCustomer = new Ext.data.Store({ proxy : new Ext.data.ScriptTagProxy({ url : './jsp/comboxdata_1.jsp' }), reader : new Ext.data.JsonReader({ root : 'gridRows', totalProperty : 'totalCount' }, [{ name : 'id', mapping : 'id' }, { name : 'name', mapping : 'name' }]) }); // construct a ComboBox this.customerCmb = new Ext.form.ComboBox({ fieldLabel : '区別', store : dsCustomer, displayField : 'name', valueField : 'id', typeAhead : true, loadingText : 'loading...', width : 160, hiddenName : 'name', //hideTrigger : true, allowBlank : false, minChars : 1, forceSelection : true, triggerAction : 'all' }); comboxdata_1.jsp : <%@ page language="java" import="java.util.*,com.googlecode.jsonplugin.JSONUtil"%> <% String cb = request.getParameter("callback"); if (cb != null) { response.setContentType("text/javascript,charset=utf8"); } List list = new ArrayList(); HashMap hm = new HashMap(); hm.put("id", "1"); hm.put("name", "11111111111"); list.add(hm); hm = new HashMap(); hm.put("id", "2"); hm.put("name", "2222222222222"); list.add(hm); HashMap rehm = new HashMap(); rehm.put("totalCount","1"); rehm.put("gridRows",list); try { String json = JSONUtil.serialize(rehm); System.out.println("json:"+json); out.print(cb + "("); out.print(json); out.print(");"); } catch (Exception ex) { ex.printStackTrace(); } /* System.out.println(cb); String json="{/"totalCount/": 1,/"gridRows/":["+"{/"id/" :1 ,/"name/":/"zhongxiaogang/"},{/"id/" :2 ,/"name/":/"linhuarui/"}]}"; out.write(cb + "("); out.print(json); out.write(");"); */ %> 示例文件： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>ComboBoxTest.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" /> <script type="text/javascript" src="ext/ext-base.js"> </script> <script type="text/javascript" src="ext/ext-all.js"> </script> <script type="text/javascript" src="ext/ext-lang-zh_CN.js"> </script> <script> Ext.onReady(function(){ Ext.QuickTips.init(); var data = [['1', 'Lislie', 'D005', 'male'], ['2', 'Merry', 'D004', 'female'], ['3', 'Edison', 'D003', 'male'], ['4', 'Mark', 'D002', 'male'], ['5', 'Leeon', 'D001', 'male']]; // 格式化数据 var ds = new Ext.data.Store({ proxy: new Ext.data.MemoryProxy(data), // 数据源 reader: new Ext.data.ArrayReader({}, [ // 如何解析 { name: 'id' }, { name: 'name' }, { name: 'depno' }, { name: 'sex' }]) }); ds.load(); var storeList = new Ext.form.ComboBox({ store: ds, fieldLabel: 'dfsfsd', allowBlank: false, forceSelection: true, valueField: 'id', // option.value typeAhead: true, displayField: 'name', // option.text triggerAction: 'all', emptyText: 'Select a store...', mode: 'local', selectOnFocus: true, width: 135 }); var folders = [{ 'folderId': '1', 'folderName': '收信箱' }, { 'folderId': '2', 'folderName': '发信箱' }]; //用于下拉列表的store var foldersJsonStore = new Ext.data.SimpleStore({ fields: [{ name: 'folderId', mapping: 'folderId' }, { name: 'folderName', mapping: 'folderName' }], data: folders }); foldersJsonStore.loadData(folders); var combo = new Ext.form.ComboBox({ fieldLabel: '文件夹', name: 'folderMoveTo', store: foldersJsonStore, displayField: 'folderName', valueField: 'folderId', mode: 'local', typeAhead: true, //自动将第一个搜索到的选项补全输入 triggerAction: 'all', emptyText: '全部', selectOnFocus: true, forceSelection: true }); var provinces = [[1, '北京'], [2, '上海']]; var cities = new Array(); cities[1] = [[11, '海淀'], [22, '东城']]; cities[2] = [[33, '黄埔'], [44, '浦东'], [55, '静安']]; var comboProvinces = new Ext.form.ComboBox({ store: new Ext.data.SimpleStore({ fields: ["provinceId", "provinceName"], data: provinces }), listeners: { select: function(combo, record, index){ comboCities.clearValue(); comboCities.store.loadData(cities[record.data.provinceId]); } }, valueField: "provinceId", displayField: "provinceName", mode: 'local', forceSelection: true, blankText: '请选择省份', emptyText: '请选择省份', hiddenName: 'provinceId', editable: false, triggerAction: 'all', allowBlank: true, fieldLabel: '请选择省份', name: 'provinceId', width: 80 }); var comboCities = new Ext.form.ComboBox({ store: new Ext.data.SimpleStore({ fields: ["cityId", 'cityName'], data: [] }), valueField: "cityId", displayField: "cityName", mode: 'local', forceSelection: true, blankText: '选择地区', emptyText: '选择地区', hiddenName: 'cityId', editable: false, triggerAction: 'all', allowBlank: true, fieldLabel: '选择地区', name: 'cityId', width: 80 }); var form = new Ext.form.FormPanel({ region: 'center', labelWidth: 100, border: false, labelAlign: 'right', applyTo: 'local1', height: 200, width: 400, layout: 'form', items: [storeList, combo,comboProvinces,comboCities] }); }); </script> </head> <body> <div id="local1"> </div> </body> </html>