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>