extjs4.1：两个combobox的联动

    一个combobox读取县地址码，change时间发生后，第二个combobox列出该县所属乡地址码。

    第一个combobox的onComboboxChange事件中，处理县地址码，生成新的URL，更新乡store。

注意取得reference的不同之处：

1、取得乡镇下拉列表框的reference

var comboboxXiang = Ext.getCmp('comboboxXiang');

2、取得乡store的reference

var StoreXiang = Ext.data.StoreManager.lookup('StoreXiang');

 

StoreXiang.js

 

Ext.define('MyApp.store.StoreXiang', {
    extend: 'Ext.data.Store',

    requires: [
        'MyApp.model.ModelXiang'
    ],

    constructor: function(cfg) {
        var me = this;
        cfg = cfg || {};
        me.callParent([Ext.apply({
            storeId: 'StoreXiang',
            model: 'MyApp.model.ModelXiang',
            proxy: {
                type: 'ajax',
                url: '/cgi-bin/wind.exe/read_xiang?xiandm=360102',
                reader: {
                    type: 'json',
                    root: 'rows'
                }
            }
        }, cfg)]);
    }
});

 

 

 

MyViewport.js

  

Ext.define('MyApp.view.MyViewport', {
			extend : 'Ext.container.Viewport',

			layout : {
				type : 'border'
			},

			initComponent : function() {
				var me = this;

				Ext.applyIf(me, {
							items : [{
										xtype : 'panel',
										region : 'west',
										width : 271,
										title : 'My Panel',
										items : [{
													xtype : 'combobox',
													autoRender : true,
													autoShow : true,
													fieldLabel : '县区',
													blankText : '请选择市',
													emptyText : '请选择...',
													displayField : 'MC',
													store : 'StoreXian',
													valueField : 'DM',
													listeners : {
														change : {
															fn : me.onComboboxChange,
															scope : me
														}
													}
												}, {
													xtype : 'combobox',
													id : 'comboboxXiang',
													autoRender : true,
													store : 'StoreXiang',
													displayField : 'MC',
													valueField : 'DM',
													fieldLabel : '乡镇',
													blankText : '请选择市',
													emptyText : '请选择...'													
												}]
									}]
						});

				me.callParent(arguments);
			},
			onComboboxChange : function(field, newValue, oldValue, options) {
				var s = newValue.toString();
				//取得地址码前六位：县代码
				s = s.substr(0, 6);
				
				//取得乡镇下拉列表框的reference
				var comboboxXiang = Ext.getCmp('comboboxXiang');
				
				//取得乡store的reference
				var StoreXiang = Ext.data.StoreManager.lookup('StoreXiang'); 
				
				StoreXiang.proxy.url = '/cgi-bin/wind.exe/read_xiang?xiandm=' + s;
				StoreXiang.load();
				//重置乡镇下拉列表框
				comboboxXiang.clearValue();
			}

		});