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