EXT 省市三级联动及默认选择

时间:2023-03-09 22:07:09
EXT 省市三级联动及默认选择
var provinceStore = Ext.create('Ext.data.Store', {
fields: ['id', 'name'],
proxy: {
type: 'ajax',
url: '/data/CommonHandlers/ComboBoxHandler.ashx?action=province',
reader: {
type: 'json',
root: 'items'
}
}
}); var cityStore = Ext.create('Ext.data.Store', {
fields: ['id', 'name'],
proxy: {
type: 'ajax',
url: '/data/CommonHandlers/ComboBoxHandler.ashx',
reader: {
type: 'json',
root: 'items'
}
}
}); var districtStore = Ext.create('Ext.data.Store', {
fields: ['id', 'name'],
proxy: {
type: 'ajax',
url: '/data/CommonHandlers/ComboBoxHandler.ashx',
reader: {
type: 'json',
root: 'items'
}
}
}); {
fieldLabel: '所属地区',
labelWidth: 60,
xtype: 'fieldcontainer',
combineErrors: true,
defaultType: 'textfield',
defaults: {
hideLabel: 'true'
},
layout: 'hbox',
flex: 1,
items: [{
emptyText: '请选择省份...',
flex: 3,
xtype: 'combobox',
name: 'Provinces',
id: 'Provinces',
hiddenName: 'name',
store: provinceStore,
selectOnFocus: true,
valueField: 'id',
displayField: 'name',
queryMode: 'remote',
editable: false,
listeners: {
select: function (Combox, record, index) {//联动效果
Ext.getCmp('Provinces_id').setValue(this.value);
var city = Ext.getCmp('City');
city.clearValue();
city.store.removeAll();
cityStore.load({
params: {
action: 'city', parentid: this.value
}
});
}
}
}, {
emptyText: '请选择城市...',
flex: 3,
editable: false,
selectOnFocus: true,
xtype: 'combobox',
id: 'City',
name: 'City',
margins: '0 0 0 6',
valueField: 'id',
displayField: 'name',
store: cityStore,
queryMode: 'local',
listeners: {
select: function (Combox, record, index) {//联动效果
Ext.getCmp('City_id').setValue(this.value);
var district = Ext.getCmp('District');
district.clearValue();
district.store.removeAll();
districtStore.load({
params: {
action: 'city', parentid: this.value
}
});
}
}
}, {
emptyText: '请选择地区...',
flex: 3,
editable: false,
selectOnFocus: true,
xtype: 'combobox',
id: 'District',
name: 'District',
margins: '0 0 0 6',
valueField: 'id',
displayField: 'name',
store: districtStore,
queryMode: 'local',
listeners: {
select: function (Combox, record, index) {//联动效果
Ext.getCmp('District_id').setValue(this.value);
}
}
}]
} 默认选择
provinceStore.load();
provinceStore.on("load", function () {
Ext.getCmp('Provinces').select(provinceStore.getAt(9));//江苏省
}, provinceStore, true);
cityStore.load({
params: {
action: 'city', parentid: 10
}
});
cityStore.on("load", function () {
Ext.getCmp('City').select(cityStore.getAt(2));//徐州市
}, cityStore, true);
districtStore.load({
params: {
action: 'city', parentid: 110//区县
}
});