extjs 省市县级联

Ext.define('State', {
        extend: 'Ext.data.Model',
        fields: [
            {type: 'string', name: 'nevalue'},
            {type: 'string', name: 'contents'}
        ]
    });

    var sheng = Ext.create('Ext.data.Store', {
        model: 'State',
        proxy: {
            type: 'ajax',
            actionMethods: {
                read: 'POST'
            },
            url: h.url + '/t/101',
            reader: {
                type: 'json'
            }
        },
        autoLoad: true
    });

    var shi = Ext.create('Ext.data.Store', {
        model: 'State',
        proxy: {
            type: 'ajax',
            actionMethods: {
                read: 'POST'
            },
            url: h.url + '/t/102',
            reader: {
                type: 'json'
            }
        },
        autoLoad: false
    });

    var xian = Ext.create('Ext.data.Store', {
        model: 'State',
        proxy: {
            type: 'ajax',
            actionMethods: {
                read: 'POST'
            },
            url: h.url + '/t/103',
            reader: {
                type: 'json'
            }
        },
        autoLoad: false
    });


    Ext.create("Ext.panel.Panel", {
        renderTo: document.body,
        width: 290,
        height: 220,
        title: "城市三级联动",
        plain: true,
        margin: '30 10 0 80',
        bodyStyle: "padding: 45px 15px 15px 15px;",
        defaults: {
            autoScroll: true,
            bodyPadding: 10
        },
        items: [{
            xtype: "combo",
            name: 'sheng',
            id: 'sheng',
            fieldLabel: '选择省',
            displayField: 'contents',
            valueField: 'nevalue',
            store: sheng,
            triggerAction: 'all',
            queryMode: 'local',
            minChars: 1 ,
            editable: false,
            emptyText: '',
            blankText: '',
            listeners: {
                select: function (combo, record, index) {
                    try {
                        var parent = Ext.getCmp('shi');
                        var parent1 = Ext.getCmp("qu");
                        parent.clearValue();
                        parent1.clearValue();
                        parent.store.load({params: {id: this.value}});
                    }
                    catch (ex) {
                        Ext.MessageBox.alert("错误", "数据加载失败。");
                    }
                }
            }
        },
            {
                xtype: "combo",
                name: 'shi',
                id: 'shi',
                fieldLabel: '选择市',
                displayField: 'contents',
                valueField: 'nevalue',
                store: shi,
                triggerAction: 'all',
                queryMode: 'local',
                minChars: 1 ,
                editable: false,
                emptyText: '',
                blankText: '',
                listeners: {
                    select: function (combo, record, index) {
                        try {
                            var parent = Ext.getCmp("qu");
                            parent.clearValue();
                            parent.store.load({params: {id: this.value}});
                        }
                        catch (ex) {
                            Ext.MessageBox.alert("错误", "数据加载失败。");
                        }
                    }
                }
            },
            {
                xtype: "combo",
                name: 'qu',
                id: 'qu',
                fieldLabel: '选择区',
                displayField: 'contents',
                valueField: 'nevalue',
                store: xian,
                triggerAction: 'all',
                queryMode: 'local',
                minChars: 1 ,
                editable: false,
                emptyText: '',
                blankText: ''
            }
        ]
    })

 

posted on 2019-03-04 22:28  ..小树苗  阅读(149)  评论(0编辑  收藏  举报

导航