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级联菜单方法

Js代码 var fatherType = new Ext.form.ComboBox({                     name:'fatherType',                ...
  • riyuecao316
  • riyuecao316
  • 2010年06月18日 20:32
  • 3202

如何用Ext来创建了个简单的ComboBox

首先先让我们来了解一下道底什么是ComboBox吧^^上面的是不是要比select要漂亮的多啊?废话不多说,上代码:Ext.onReady(function(){        var data = ...
  • yixiaotian1988
  • yixiaotian1988
  • 2011年04月10日 18:11
  • 3268

点滴记录ExtJS练习——ComboBox的四种扩展

摘要:ComboBox是常用控件之一,但由于其数据来源分两种形式:本地和远程,故写的形式难度并不亚于ExtJS中的TreePanel和GridPanel。鄙人也经常提醒自己的师弟师妹,ExtJS本身是...
  • pengxuan
  • pengxuan
  • 2015年10月22日 17:52
  • 1395

ext combobox动态加载数据库数据

前台: var provinceStore = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({ url: basePath + "...
  • shanhuhau
  • shanhuhau
  • 2014年06月17日 15:01
  • 1897

[code]使Ext.form.Combobox支持手动输入的值

new Ext.form.ComboBox({ fieldLabel : 日期, value : new Date().getYear() + 1900, store : [new D...
  • loocao
  • loocao
  • 2010年05月11日 11:32
  • 1804

ext ComboBox 设置默认值为第一个值

var data = [ { 'name': 'linechart', 'text': '折线图' }, { 'name': 'columnchart', 'tex...
  • wearegouest
  • wearegouest
  • 2010年10月28日 16:31
  • 15884

EXTJS如何设置ComboBox的值

new Ext.form.ComboBox({             fieldLabel: '就业类别 style="color:red;">*  ',         ...
  • maxu12345
  • maxu12345
  • 2015年05月05日 20:33
  • 1263

Ext combobox store add

1、静态 var staticComboBox = new Ext.form.ComboBox({    fieldLabel:'回访结果',    name:'result...
  • yixiaotian1988
  • yixiaotian1988
  • 2012年07月02日 12:38
  • 5406

Extjs Combobox 高度设置

//需要在listcoinfig中配置,本身的maxHeight不起作用 Ext.onReady(function() { var testStore = Ext.create('Ext.da...
  • pengshuangbao520
  • pengshuangbao520
  • 2014年03月12日 10:13
  • 1795

3.3.3Ext.form.ComboBox -动态绑定数据库

前台代码:
  • shutingwang
  • shutingwang
  • 2011年08月31日 16:11
  • 1485
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Ext ComboBox 展示
举报原因:
原因补充:

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