Ext ComboBox 展示

原创 2008年07月15日 11:04:00
 <!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>

相关文章推荐

Ext带图标Combobox

  • 2013年12月02日 18:26
  • 757KB
  • 下载

ext combobox动态加载数据库数据

前台: var provinceStore = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({ url: basePath + "...

Ext-&gt;editgrid+combobox

  • 2011年07月11日 13:48
  • 7KB
  • 下载

扩展Ext的Combobox实现多选下拉列表

使用过Ext的人都知道,Ext的Combobox只支持单项选择,而项目中我们经常用到多选下拉框,怎么做呢? 很简单,因为Ext给我们提供了继承机制,这也意味着我们可以通过继承Combobox的方...

Ext Js 4 的ComboBox学习与实例

1:简单介绍     A combobox control with support for autocomplete, remote loading, and many other featu...

Ext.form.ComboBox实现省、市、县级联

使用Ext.form.ComboBox

Ext 组合框 ComboBox 分页

如何用Ext来实现一个组合下拉框,来实现类似select的效果?首先我们先来创建一个组合框comboBox:...

ext store filter用于combobox

下面分享ext用store的filterBy方法过滤combobox数据的
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Ext ComboBox 展示
举报原因:
原因补充:

(最多只允许输入30个字)