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',
         width: 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: '请选择地区',
             width: 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: '请选择城市',
             width: 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要显示的值。

效果：