Extjs之combobox联动

Ext.Loader.setConfig({
    enabled : true 
}); 
Ext.Loader.setPath('Ext.ux', '../extjs/ux');
Ext.require([ 'Ext.form.*', 'Ext.data.*', 'Ext.grid.Panel' ]);

Ext.onReady(function() {
    Ext.QuickTips.init();
    var bodyWidth;
    var bodyHeight;
    var panelWidth = bodyWidth;
    var panelHeight = bodyHeight;
    
    Ext.define('com_data', {
        extend: 'Ext.data.Model',
        fields: [ 'id', 'name' ]
    });

    var com1_store = Ext.create('Ext.data.Store', {
        autoDestroy: true,
        fields: ['com1id','com1name'],
        data: [{
            'com1id':"1",
            'com1name':"北京"
        },{
            'com1id':"2",
            'com1name':"河北"
        },{
            'com1id':"3",
            'com1name':"内蒙古"
        }]
    });
    
    var com2_store = Ext.create('Ext.data.Store', {
        autoDestroy: true,
        model: 'com_data'
    });
    
    var myPanel = Ext.create('Ext.panel.Panel', {
        id: 'myPanel',
        name: 'myPanel',
         panelWidth,
        height: panelHeight,
        title: 'Extjs嵌入html',
        bodyPadding: '10 10 10 10',
        items: [{
            xtype: 'combobox',
            id: 'com1',
            name: 'com1',
            store: com1_store,
            valueField: 'com1id',
            displayField: 'com1name',
            queryMode: 'local',
            fieldLabel: '请选择地区',
             200,
            labelWidth: 100,
            listeners: {
                change: function(){//匿名函数
                    var com1id = Ext.getCmp("com1").getValue();
                    com2_store.removeAll(false);
                    if(com1id == "1"){
                        var data1 = Ext.create('com_data', {
                            id: '1',
                            name: '海淀区'
                        });
                        com2_store.add(data1);
                        var data2 = Ext.create('com_data', {
                            id: '2',
                            name: '朝阳区'
                        });
                        com2_store.add(data2);
                        var data3 = Ext.create('com_data', {
                            id: '3',
                            name: '丰台区'
                        });
                        com2_store.add(data3);
                    } else if(com1id == "2"){
                        var data1 = Ext.create('com_data', {
                            id: '1',
                            name: '石家庄'
                        });
                        com2_store.add(data1);
                        var data2 = Ext.create('com_data', {
                            id: '2',
                            name: '保定市'
                        });
                        com2_store.add(data2);
                        var data3 = Ext.create('com_data', {
                            id: '3',
                            name: '邯郸市'
                        });
                        com2_store.add(data3);
                    } else if(com1id == "3"){
                        var data1 = Ext.create('com_data', {
                            id: '1',
                            name: '呼和浩特市'
                        });
                        com2_store.add(data1);
                        var data2 = Ext.create('com_data', {
                            id: '2',
                            name: '赤峰市'
                        });
                        com2_store.add(data2);
                        var data3 = Ext.create('com_data', {
                            id: '3',
                            name: '包头市'
                        });
                        com2_store.add(data3);
                    } else {
                        //空
                    }
                }
            }
        }, {
            xtype: 'combobox',
            id: 'com2',
            name: 'com2',
            store: com2_store,
            valueField: 'id',
            displayField: 'name',
            queryMode: 'local',
            fieldLabel: '请选择城市',
             200,
            labelWidth: 100
        }]
    });
    myPanel.render(document.body);
    
    Ext.onDocumentReady(function() {
        //gridstoreLoad(); 
    });
       
    window.onresize=function(){ 
        bodyHeight = window.innerHeight?(window.innerHeight<600?600:window.innerHeight):document.documentElement.clientHeight;
        bodyWidth = window.innerWidth?window.innerWidth:document.body.offsetWidth;
    };
   
});

上面的方式是通过选择下拉框1的值改变下拉框2的值，在下拉框1改变时通过store的add方法添加下拉框2要显示的值，也可以通过获得下拉框1的值使用store的load的方法到后台查找下拉框2要显示的值。

效果：