我所收集的几种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>