Ext ComboBox 展示

最新推荐文章于 2021-06-04 05:36:55 发布

冷月宫主

最新推荐文章于 2021-06-04 05:36:55 发布

阅读量1.2w

点赞数

分类专栏： EXT 文章标签： ext stylesheet function html border layout

本文链接：https://blog.csdn.net/E_wsq/article/details/2652803

版权

EXT 专栏收录该内容

192 篇文章 0 订阅

订阅专栏

<!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>