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

你可能感兴趣的:(EXT)