我所收集的几种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(");"); */ %> 示例文件:
ComboBoxTest.html