extjs combobox省市县3级联动示例

  extjs combobox省市县3级联动示例,示例居于ext-4.1.1a,4+版本应该不会出错,3-自己注意修改store的创建模式,3+和4+是extjs的分水岭,store创建基本完全不一样,自己对照api修改如果需要兼容3-版本的extjs。

extjs combobox省市县3级联动示例

  extjs combobox省市县3级联动示例源代码如下

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>extjs combobox省市县3级联动示例</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../ext-all-debug.js"></script>
<script type="text/javascript">
    var arrPro = [{ t: '北京', id: 1 }, { t: '上海', id: 2 }, { t: '广西', id: 3 }]
    //市数据结构,为json数组对象。数组小标为省的id,数组项为市json数据。。
    var arrCity = [];
    arrCity[1] = [{ t: '北京市', id: 1 }];
    arrCity[2] = [{ t: '上海市', id: 2 }];
    arrCity[3] = [{ t: '南宁市', id: 3 }, { t: '桂林市', id: 4 }, { t: '柳州市', id: 5 }];
    //如果还有县的联动,同理生成arrTown即可
    var arrTown = [];
    arrTown[1] = [{ t: '东城区', id: 1 }, { t: '海淀区', id: 2 }]
    arrTown[2] = [{ t: '黄埔区', id: 4 }, { t: '静安区', id: 5 }]
    arrTown[3] = [{ t: '青秀区', id: 6 }]
    arrTown[4] = [{ t: '七星区', id: 7 }, { t: '象山区', id: 8 }, { t: '秀峰区', id: 9 }]
    arrTown[5] = [{ t: '鱼峰区', id: 10 }, { t: '拉堡', id: 11 }]
    Ext.onReady(function () {
        Ext.define('Area', { extend: 'Ext.data.Model', fields: [{ name: 't' }, { name: 'id' }] });
        Ext.create('Ext.panel.Panel', {
            title: 'extjs combobox省市县3级联动示例',
            width: 500,
            frame: true,
            layout: { type: 'table', columns: 6, tdAttrs: { valign: 'top' } },
            defaults: { bodyStyle: 'padding:5px;background-color:transparent;border:none' },
            items: [{
                html: '省:',
            }, {
                xtype: 'combobox', width: 100, queryMode: 'local', displayField: 't', valueField: 'id',id:'cbPro',
                store: Ext.create('Ext.data.Store', { model: 'Area' }),
                value:3,//默认值,实际应用从数据库中读取
                listeners: {
                    //显示后加载数据并且触发chagne事件加载市
                    afterrender: function (el, opts) {
                        el.getStore().loadData(arrPro);
                        var value = el.getValue();
                        //重新设置过值,要不loadData后上面配置的value直接显示而不是显示对应的text
                        el.setValue(value).fireEvent('change', el, value, 'init');
                    },
                    change: function (el, nv, ov, opts) {
                        Ext.getCmp('cbCity').getStore().loadData(arrCity[nv]);
                        if (ov !== 'init') Ext.getCmp('cbCity').setValue('...')
                    }
                }
            }, {
                html: '市'
            }, {
                xtype: 'combobox', width: 100, queryMode: 'local', displayField: 't', valueField: 'id',id:'cbCity',
                store: Ext.create('Ext.data.Store', { model: 'Area' }),
                value: 4,//默认值,实际应用从数据库中读取
                listeners: {
                    //显示后加载数据并且触发chagne事件加载县
                    afterrender: function (el, opts) {
                        el.getStore().loadData(arrCity[Ext.getCmp('cbPro').getValue()]);
                        var value = el.getValue();
                        //重新设置过值,要不loadData后上面配置的value直接显示而不是显示对应的text
                        el.setValue(value).fireEvent('change', el, value, 'init');
                    },
                    change: function (el, nv, ov, opts) {
                        Ext.getCmp('cbTown').getStore().loadData(arrTown[nv]);
                        if (ov !== 'init') Ext.getCmp('cbTown').setValue('...')
                    }
                }
            }, {
                html: '县'
            }, {
                xtype: 'combobox', width: 100, queryMode: 'local', displayField: 't', valueField: 'id', id: 'cbTown',
                store: Ext.create('Ext.data.Store', { model: 'Area' }),
                value: 7,//默认值,实际应用从数据库中读取
                listeners: {
                    afterrender: function (el, opts) {
                        el.getStore().loadData(arrTown[Ext.getCmp('cbCity').getValue()]);
                        var value = el.getValue();
                        //重新设置过值,要不loadData后上面配置的value直接显示而不是显示对应的text
                        el.setValue(value)
                    }
                }
            }],
            renderTo: Ext.getBody()
        });
    })
</script>
</head>
<body>
</body>
</html>

 


原创文章,转载请注明出处:extjs combobox省市县3级联动示例

评论(0)Web开发网
阅读(208)喜欢(0)不喜欢(0)extjs开发技巧