EXTJS6.2实现省市县级联下拉框的总结

一、首先我在自己的电脑里建了一个空的文件夹，后面我会把项目放在这个空文件夹内。

二、打开cmd,在cmd中输入指令进入刚刚新建的文件夹

然后输入指令创建项目 ，sencha -sdk D:\EXTJS6.2\ext-6.2.0 generate app -classic SimpeCMS D:\EXTJS6.2\project2 根据个人的项目目录创建就好了，名称自己定义。

然后enter回车就可以创建好项目了。

三、然后这里我自己用的是webstorm来跑项目的。下面是打开后的项目结构：

 直接点击index.html,把项目跑起来就可以了。

后面我们要开始修改代码了，进入app目录下面的view，view里面有一个main文件夹，打开后点击List.js，然后修改代码就可以了，我就不多做解释了，直接粘贴了。

Ext.define('SimpeCMS.view.main.List', {
    extend: 'Ext.container.Container',
    xtype: 'mainlist',
    requires: [
        'SimpeCMS.store.Personnel'
    ],
    viewModel: {
        data: {
            province: '',
            city: '',
            county: ''
        }
    },
    items: [
        {
            xtype:'textfield',
            bind:{
                value:'{province}'+' '+'{city}'+' '+'{county}'
            }
        },
        {
            xtype: "combobox",
            fieldLabel: "选择省份",
            name: "provincename",
            labelAlign: "left",
            emptyText: "请选择省份",
            typeAhead: true,
            queryMode: "local",
            allowBlank: false,
            forceSelection: true,
            store: Ext.create("Ext.data.Store",
                {
                    proxy: {
                        type: 'ajax',
                        url: 'resources/data/province.json'
                    },
                    root: {
                        text: 'All',
                        id: 'all',
                        expanded: true
                    },
                    autoLoad: true
                }),
            valueField: "key",
            displayField: "value",
            listeners: {
                'change': function (t, n, o, e) {
                    console.log('demo',n)
                    var rew=this.rawValue;
                    console.log(this.value);
                    var parent=this.ownerCt;
                    parent.getViewModel().set('province',rew);//设置model中的字段为选中的内容
                    var temp = n;
                    this.nextSibling().reset();
                    this.nextSibling().nextSibling().reset();
                    var cityurl='resources/data/city'+temp+'.json';
                    console.log(cityurl)
                    city.proxy.url=cityurl;
                    city.load({
                        callback: function(records, options, success){
                            // Ext.Msg.alert('info', '加载完毕');
                            console.log(temp)
                        },
                        add: false
                    });
                }
            }
        },
        {
            xtype: "combobox",
            fieldLabel: "选择城市",
            name: "cityname",
            queryMode: "local",
            triggerAction: "all",
            store:city=Ext.create("Ext.data.Store",
                {
                    proxy: {
                        type: 'ajax',
                        url: 'resources/data/city.json'
                    },
                    root: {
                        text: 'All',
                        id: 'all',
                        expanded: true
                    },
                    autoLoad: false
                }),
            labelAlign: "left",
            emptyText: "请选择城市",
            typeAhead: true,
            valueField: "key",
            displayField: "value",
            forceSelection: true,
            defaultListConfig: {
                loadMask: false
            },
            listeners: {
                'change': function (t, n, o, e) {
                    var rew=this.rawValue;
                    console.log(this.rawValue);
                    var parent=this.ownerCt;
                    parent.getViewModel().set('city',rew);
                    var temp1 = n?n:'';
                    this.nextSibling().reset();
                    var previousSibling=this.previousSibling();
                    var countyurl='resources/data/county'+temp1+'.json';
                    console.log(countyurl)
                    county.proxy.url=countyurl;
                    county.load({
                        callback: function(records, options, success){
                            // Ext.Msg.alert('info', '加载完毕');
                            console.log(temp1)
                        },
                        add: false
                    });
                }
            }
        },
        {
            xtype: "combobox",
            fieldLabel: "选择县市",
            name: "xianname",
            queryMode: "local",
            triggerAction: "all",
            store:county= Ext.create("Ext.data.Store",
                {
                    proxy: {
                        type: 'ajax',
                        url: 'resources/data/county.json'
                    },
                    root: {
                        text: 'All',
                        id: 'all',
                        expanded: true
                    },
                    autoLoad: false
                }),
            labelAlign: "left",
            emptyText: "请选择县",
            typeAhead: true,
            valueField: "key",
            displayField: "value",
            forceSelection: true,
            defaultListConfig: {
                loadMask: false
            },
            listeners: {
                'change': function (t, n, o, e) {
                    //alert(temp==null);
                    var rew=this.rawValue;
                    console.log(this.rawValue);
                    var parent=this.ownerCt;
                    parent.getViewModel().set('county',rew);
                   var temp = n;
                    if(temp==null){temp=n;}else{temp=n;}
                }
            }
        }

    ]
})

然后把Main.js稍作修改一下，这里我也直接复制粘贴了。

/**
 * This class is the main view for the application. It is specified in app.js as the
 * "mainView" property. That setting automatically applies the "viewport"
 * plugin causing this view to become the body element (i.e., the viewport).
 *
 * TODO - Replace this content of this view to suite the needs of your application.
 */
Ext.define('SimpeCMS.view.main.Main', {
    extend: 'Ext.tab.Panel',
    xtype: 'app-main',

    requires: [
        'Ext.plugin.Viewport',
        'Ext.window.MessageBox',

        'SimpeCMS.view.main.MainController',
        'SimpeCMS.view.main.MainModel',
        'SimpeCMS.view.main.List',
    ],

    controller: 'main',
    viewModel: 'main',

    ui: 'navigation',

    tabBarHeaderPosition: 1,
    titleRotation: 0,
    tabRotation: 0,

    header: {
        layout: {
            align: 'stretchmax'
        },
        title: {
            bind: {
                text: '{name}'
            },
            flex: 0
        },
        iconCls: 'fa-th-list'
    },

    tabBar: {
        flex: 1,
        layout: {
            align: 'stretch',
            overflowHandler: 'none'
        }
    },

    responsiveConfig: {
        tall: {
            headerPosition: 'top'
        },
        wide: {
            headerPosition: 'left'
        }
    },

    defaults: {
        bodyPadding: 20,
        tabConfig: {
            plugins: 'responsive',
            responsiveConfig: {
                wide: {
                    iconAlign: 'left',
                    textAlign: 'left'
                },
                tall: {
                    iconAlign: 'top',
                    textAlign: 'center',
                    width: 120
                }
            }
        }
    },

    items: [{
        title: 'Home',
        iconCls: 'fa-home',
        // The following grid shares a store with the classic version's grid as well!
        items: [{
            xtype: 'mainlist'
        }]
    }, {
        title: 'Users',
        iconCls: 'fa-user',
        bind: {
            html: '{loremIpsum}'
        }
    }, {
        title: 'Groups',
        iconCls: 'fa-users',
        bind: {
            html: '{loremIpsum}'
        }
    }, {
        title: 'Settings',
        iconCls: 'fa-cog',
        bind: {
            html: '{loremIpsum}'
        }
    }]
});

运行结果如下：
（不知道出于什么原因，截图也一直被删掉）

好了，基本上就这些了，然后直接保存刷新一下页面就可以了，需要的数据我会在后面上传（数据一直被下架算了）。