ext省市县级联下拉

做了个省市县级联下拉

/**
 * Created by Sukla on 2017/7/28.
 */
Ext.define('app.view.common.ssx.Ssx', {
    extend: 'Ext.container.Container',
    alias: 'widget.s-s-x',
    requires: [
        'app.store.Personnel'
    ],
    viewModel: {
        data: {
            province: '',
            city: '',
            county: ''
        }
    },
    items: [
        {
            xtype:'textfield',
            bind:{
                value:'{province}'+' '+'{city}'+' '+'{county}'
            }
        },
        //{
        //    xtype:'label',
        //    bind:{
        //        text:'{city}'
        //    }
        //},
        //{
        //    xtype:'label',
        //    bind:{
        //        text:'{county}'
        //    }
        //},
        {
            xtype: "combobox",
            fieldLabel: "选择省份",
            name: "provincename",
            //id: "provincename",
            //bind:'{province}',
            labelAlign: "left",
            emptyText: "请选择省份",
            typeAhead: true,
            queryMode: "local",
            allowBlank: false,
            forceSelection: true,
            //store: {
            //    type: 'province'
            //},
            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) {
                    //alert(temp==null);
                    var rew=this.rawValue;
                    console.log(this.value);
                    var parent=this.ownerCt;
                    parent.getViewModel().set('province',rew);//设置model中的字段为选中的内容

                    var temp = n;
                    //Ext.getCmp("cityname").setDisabled(false);
                    //alert(n);
                    //alert(r.pop().get("key"));
//                                                if(temp==null){temp=n;}else{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)
                        },
                        //scope: store, //Scope用来指定回调函数执行时的作用域
                        //Add为true时，load()得到的数据会添加在原来的store数据的末尾，
                        //否则会先清除之前的数据，再将得到的数据添加到store中
                        add: false
                    });
                }
//                                            ,
//                                            'change':function(t,n,o,e){
//                                                alert('change');
//                                            }
            }
        },
        {
            xtype: "combobox",
            fieldLabel: "选择城市",
            name: "cityname",
            //bind:'{city}',
            //id: "cityname",
            queryMode: "local",
            //disabled:true,
            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
                    }),
            //store: {
            //    type: 'city'
            //},
            //store: Ext.create("Ext.data.Store",
            //    {
            //        proxy: {
            //            type: 'ajax',
            //            url: 'resources/data/province.json'
            //        },
            //        root: {
            //            text: 'All',
            //            id: 'all',
            //            expanded: true
            //        },
            //        autoLoad: true
            //    }),
            //store: Ext.create("Ext.data.ArrayStore",
            //    {
            //        fields: ["key", "value"],
            //        data: [["km", "昆明"], ["qj", "曲靖"], ["mz", "蒙自"]]
            //    }),
            //multiSelect:true,
            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('city',rew);
                    var temp1 = n?n:'';
                    //Ext.getCmp("cityname").setDisabled(false);
                    //alert(n);
                    //alert(r.pop().get("key"));
//                                                if(temp==null){temp=n;}else{temp=n;}
                    this.nextSibling().reset();
                    var previousSibling=this.previousSibling();
                    //county= Ext.create("Ext.data.Store",
                    //    {
                    //        proxy: {
                    //            type: 'ajax',
                    //            url: 'resources/data/city'+temp+'.json'
                    //        },
                    //        root: {
                    //            text: 'All',
                    //            id: 'all',
                    //            expanded: true
                    //        },
                    //        autoLoad: false
                    //    });



                    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)
                        },
                        //scope: store, //Scope用来指定回调函数执行时的作用域
                        //Add为true时，load()得到的数据会添加在原来的store数据的末尾，
                        //否则会先清除之前的数据，再将得到的数据添加到store中
                        add: false
                    });

                    //store1.load({
                    //    callback: function(records, options, success){
                    //        Ext.Msg.alert('info', '加载完毕');
                    //    },
                    //    //scope: store, //Scope用来指定回调函数执行时的作用域
                    //    //Add为true时，load()得到的数据会添加在原来的store数据的末尾，
                    //    //否则会先清除之前的数据，再将得到的数据添加到store中
                    //    add: false
                    //});
                }
//                                            ,
//                                            'change':function(t,n,o,e){
//                                                alert('change');
//                                            }
            }
        },
        {
            xtype: "combobox",
            fieldLabel: "选择县市",
            name: "xianname",
            //bind:'{county}',
            //id: "xianname",
            queryMode: "local",
            //disabled:true,
            triggerAction: "all",
            //store: {
            //    type: 'county'
            //},
            store:county= Ext.create("Ext.data.Store",
                {
                    proxy: {
                        type: 'ajax',
                        url: 'resources/data/county.json'
                    },
                    root: {
                        text: 'All',
                        id: 'all',
                        expanded: true
                    },
                    autoLoad: false
                }),
            //store: Ext.create("Ext.data.ArrayStore",
            //    {
            //        fields: ["key", "value"],
            //        data: [["xw", "宣威"], ["bq", "板桥"], ["bs", "宝山"]]
            //    }),
            //multiSelect:true,
            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;
//                    //Ext.getCmp("cityname").setDisabled(false);
//                    //alert(n);
//                    //alert(r.pop().get("key"));
                                                if(temp==null){temp=n;}else{temp=n;}
//                    this.nextSibling().reset();
//                    var previousSibling=this.previousSibling();
//                    console.log(previousSibling.store)
//                    //store1.load({
//                    //    callback: function(records, options, success){
//                    //        Ext.Msg.alert('info', '加载完毕');
//                    //    },
//                    //    //scope: store, //Scope用来指定回调函数执行时的作用域
//                    //    //Add为true时，load()得到的数据会添加在原来的store数据的末尾，
//                    //    //否则会先清除之前的数据，再将得到的数据添加到store中
//                    //    add: false
//                    //});
                }
//                                            ,
//                                            'change':function(t,n,o,e){
//                                                alert('change');
//                                            }
            }
        }

    ]
})