一个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();
}
});