EXTJS-6.2.0示例-全国省市县三级联动（传统组件方式）

时间 2019-12-21
标签 extjs 6.2.0 示例全国市县三级联动传统组件方式繁體版
原文原文链接
extjs 6.2.0 实现全国城市三级联动传统模式，监听下拉选择框的change事件实现
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>全国城市三级联动-传统方式</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.bootcss.com/extjs/6.2.0/classic/theme-crisp/resources/theme-crisp-all.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/extjs/6.2.0/ext-all.js"></script>
    <script src="https://cdn.bootcss.com/extjs/6.2.0/classic/theme-crisp/theme-crisp.js"></script>
</head>

<body>
<script src="regions.js"></script>
<script>

    function getChild(pid) {
        var data = new Array();
        Ext.each(regions, function (item) {
            if (item.pid == pid) {
                data.push(item)
            }
        });
        return data;

    }

    Ext.onReady(function () {
        var provinceStore = Ext.create('Ext.data.Store', {
            data: getChild(1),
            autoLoad: true
        });
        var cityStore = Ext.create('Ext.data.Store', {
            autoLoad: false
        });
        var countyStore = Ext.create('Ext.data.Store', {
            autoLoad: false
        });
        var province = Ext.create('Ext.form.ComboBox', {
            displayField: 'text',
            valueField: 'id',
            fieldLabel: '省份',
            labelAlign: 'right',
            emptyText: '请选择',
            queryMode: 'local',
            store: provinceStore,
            listeners: {
                change: function (combo, nv, ov) {
                    var pid = combo.getValue();
                    cityStore.removeAll();
                    countyStore.removeAll();
                    city.reset();
                    county.reset();
                    cityStore.add(getChild(pid));
                }
            }
        })
        var city = Ext.create('Ext.form.ComboBox', {
            displayField: 'text',
            valueField: 'id',
            fieldLabel: '城市',
            labelAlign: 'right',
            emptyText: '请选择',
            queryMode: 'local',
            store: cityStore,
            listeners: {
                change: function (combo, nv, ov) {
                    var pid = combo.getValue();
                    countyStore.removeAll();
                    county.reset();
                    countyStore.add(getChild(pid));
                }
            }
        })
        var county = Ext.create('Ext.form.ComboBox', {
            displayField: 'text',
            valueField: 'id',
            fieldLabel: '区县',
            labelAlign: 'right',
            emptyText: '请选择',
            queryMode: 'local',
            store: countyStore
        })
        Ext.create('Ext.form.Panel', {
            title: '三级联动?',
            bodyPadding: 5,
            width: '100%',
            defaultType: 'textfield',
            autoHeight: true,
            fieldDefaults: {
                labelAlign: 'right',
                labelStyle: 'font-weight:bold;'
            },
            border: false,
            layout: 'hbox',
            items: [province, city, county],
            renderTo: Ext.getBody()
        });

    });
</script>
</body>

</html>
用到的全国城市数据 regions.js