Extjs自定义控件－地址联动控件

由于地址数据过多无法发贴，变量data中的数组数据已给我删略 

/*
{ xtype: 'exaddress', name: 'F_Work_Palce', fieldLabel: '工作地', allowBlank: true, width: '75%', layout: 'checkboxgroup', },
*/
//地区联动地址组件
Ext.define('ExAddress', {
    extend: 'Ext.form.FieldContainer',
    alias: ['widget.exaddress'],
    mixins: {
        field: 'Ext.form.field.Field'
    },
    requires: [
        'Ext.form.field.ComboBox',
    ],
    items: [                 
    ],
    allowBlank: true,
    width:'100%',
    //layout: 'checkboxgroup',
    initComponent: function () {
        var me = this;
        //地区数据
        var data = [
['1', '中国', '中国', '0', '0', '0', 'Zhong Guo', '2'],
['2', '110000', '北京市', '1', '0', '0', 'Beijing Shi', 'BJ'],
['3', '120000', '天津市', '1', '0', '0', 'Tianjin Shi', 'TJ'],
['4', '130000', '河北省', '1', '0', '0', 'Hebei Sheng', 'HE'],
['5', '140000', '山西省', '1', '0', '0', 'Shanxi Sheng ', 'SX']
        ];
        //国store
        var storeCountry = new Ext.data.ArrayStore({
            fields: ['REGION_ID', 'REGION_CODE', 'REGION_NAME', 'PARENT_ID','REGION_LEVEL', 'REGION_ORDER', 'REGION_NAME_EN', 'REGION_SHORTNAME_EN'],
            data: data
        });
        //省store
        var storeProvince = new Ext.data.ArrayStore({
            fields: ['REGION_ID', 'REGION_CODE', 'REGION_NAME', 'PARENT_ID', 'REGION_LEVEL', 'REGION_ORDER', 'REGION_NAME_EN', 'REGION_SHORTNAME_EN'],
            data: data
        });
        //市store
        var storeCity = new Ext.data.ArrayStore({
            fields: ['REGION_ID', 'REGION_CODE', 'REGION_NAME', 'PARENT_ID', 'REGION_LEVEL', 'REGION_ORDER', 'REGION_NAME_EN', 'REGION_SHORTNAME_EN'],
            data: data
        });
        //区store
        var storeArea = new Ext.data.ArrayStore({
            fields: ['REGION_ID', 'REGION_CODE', 'REGION_NAME', 'PARENT_ID', 'REGION_LEVEL', 'REGION_ORDER', 'REGION_NAME_EN', 'REGION_SHORTNAME_EN'],
            data: data
        });
        storeCountry.clearFilter(true);
        storeCountry.filterBy(function (record) {
            return record.get('PARENT_ID') == "0";
        });
        storeProvince.clearFilter(true);
        storeProvince.filterBy(function (record) {
            return false;
        });
        storeCity.clearFilter(true);
        storeCity.filterBy(function (record) {
            return false;
        });
        storeArea.clearFilter(true);
        storeArea.filterBy(function (record) {
            return false;
        });
        //国
        var comboCountry = {
            xtype: 'combobox',
            editable: true,
            allowBlank: me.allowBlank,
            forceSelection: true,
            name: 'province',
            width: me.width,
            labelWidth: 15,
            fieldLabel: '国',
            //emptyText: '请选择国家',
            labelAlign: 'right',
            store: storeCountry,
            displayField: 'REGION_NAME',
            valueField: 'REGION_NAME',
            triggerAction: 'all',
            queryMode: 'local',
            autoSelect: true,
            listeners: {
                select: function (combo, recordp, index) {
                    storeProvince.clearFilter(true);
                    storeProvince.filterBy(function (record) {
                        return record.get('PARENT_ID') == recordp[0].get("REGION_ID");
                    });
                    storeCity.clearFilter(true);
                    storeCity.filterBy(function (record) {
                        return false;
                    });
                    storeArea.clearFilter(true);
                    storeArea.filterBy(function (record) {
                        return false;
                    });

                    if (storeProvince.count() > 0) {
                        me.getBoxes()[1].show();
                    }
                    else
                    {
                        me.getBoxes()[1].hide();
                    }
                    if (storeCity.count() > 0) {
                        me.getBoxes()[2].show();
                    }
                    else {
                        me.getBoxes()[2].hide();
                    }
                    if (storeArea.count() > 0) {
                        me.getBoxes()[3].show();
                    }
                    else {
                        me.getBoxes()[3].hide();
                    }
                    me.getBoxes()[1].setValue('');
                    me.getBoxes()[2].setValue('');
                    me.getBoxes()[3].setValue('');
                },
                afterRender: function (combo) {
                    var store = combo.getStore();
                    if (store.getCount() > 0) {
                        var firstValue = store.getAt(0).data.REGION_NAME;
                        combo.setValue(firstValue);//同时下拉框会将与name为firstValue值对应的 text显示
                        combo.setValue(firstValue).fireEvent('select', combo, [combo.findRecord("REGION_NAME", firstValue)]);
                    }
                }
            },
        };
        //省
        var comboProvince = {
            xtype: 'combobox',
            editable: true,
            allowBlank: true,
            forceSelection: true,
            name: 'province',
            width: me.width,
            labelWidth: 15,
            fieldLabel: '省',
            //emptyText: '请选择省份',
            labelAlign: 'right',
            store: storeProvince,
            displayField: 'REGION_NAME',
            valueField: 'REGION_NAME',
            triggerAction: 'all',
            queryMode: 'local',
            hidden:true,
            listeners: {
                select: function (combo, recordp, index) {
                    storeCity.clearFilter(true);
                    storeCity.filterBy(function (record) {
                        return record.get('PARENT_ID') == recordp[0].get("REGION_ID");
                    });
                    storeArea.clearFilter(true);
                    storeArea.filterBy(function (record) {
                        return false;
                    });
                    if (storeCity.count() > 0) {
                        me.getBoxes()[2].show();
                    }
                    else {
                        me.getBoxes()[2].hide();
                    }
                    if (storeArea.count() > 0) {
                        me.getBoxes()[3].show();
                    }
                    else {
                        me.getBoxes()[3].hide();
                    }
                    me.getBoxes()[2].setValue('');
                    me.getBoxes()[3].setValue('');
                }
            },
        };
        //市
        var comboCity = {
            xtype: 'combobox',
            editable: true,
            allowBlank: true,
            forceSelection: true,
            name: 'city',
            width: me.width,
            labelWidth: 15,
            fieldLabel: '市',
            //emptyText: '请选择市',
            labelAlign: 'right',
            store: storeCity,
            displayField: 'REGION_NAME',
            valueField: 'REGION_NAME',
            triggerAction: 'all',
            queryMode: 'local',
            hidden: true,
            listeners: {
                select: function (combo, recordp, index) {
                    storeArea.clearFilter(true);
                    storeArea.filterBy(function (record) {
                        return record.get('PARENT_ID') == recordp[0].get("REGION_ID");
                    });
                    if (storeArea.count() > 0) {
                        me.getBoxes()[3].show();
                    }
                    else {
                        me.getBoxes()[3].hide();
                    }
                    me.getBoxes()[3].setValue('');
                }
            },
        };
        //区
        var comboArea = {
            xtype: 'combobox',
            editable: true,
            allowBlank: true,
            forceSelection: true,
            name: 'area',
            width: me.width,
            labelWidth: 15,
            fieldLabel: '区',
            //emptyText: '请选择区',
            labelAlign: 'right',
            store: storeArea,
            displayField: 'REGION_NAME',
            valueField: 'REGION_NAME',
            triggerAction: 'all',
            queryMode: 'local',
            hidden: true
        };

        me.items = [];
        me.items.push(comboCountry);
        me.items.push(comboProvince);
        me.items.push(comboCity);
        me.items.push(comboArea);


        me.callParent(arguments);
    },
    /*设置值*/
    setValue: function (value) {
        var me = this;
        var values = value.split(',');
        var items = me.getBoxes();
        for (var i = 0; i < values.length; i++) {
            if (values[i] != null && values[i] !='') {
                items[i].setValue(values[i]).fireEvent('select', items[i], [items[i].findRecord("REGION_NAME", values[i])]);
            }
        }
        return me;
    },
    /*获取值*/
    getValue: function () {
        var me = this;
        var values = [];
        var value = '';
        Ext.each(me.getBoxes(), function (item) {
            if (item.getValue() != null) {
                values.push(item.getValue());
            }
        });
        for(var i=0;i<values.length;i++)
        {
            value += values[i];
            if (i < values.length - 1)
            {
                value += ',';
            }
        }
        return value;
    },
    /*取得项*/
    getBoxes: function () {
        return this.query('[xtype=combobox]');
    },
});