Ext 三级联动 及附值

/// <reference path="../../ext.js" />
Ext.define('Myview.Region', {
extend: 'Ext.form.FieldContainer',
alias: 'widget.fieldRegioncontainer',
layout: "hbox",
initComponent: function () {
var me = this;

//要点，附值时要设置SelectCity，SelectArea，Province控件的值
//由于附值时，直接设置City和Area时，相应的store加载后会把设置的值清空，所以只能加载完 store后从SelectCity，SelectArea获取初使的值
//省store
me.provinceStore = Ext.create("Ext.data.Store", {
autoLoad: true,
autoSync: false,
fields: [
{ name: "RegionId", type: "int" },
{ name: "RegionName" }
],
proxy: {
type: 'ajax',
url: "../sys/AjaxRegionService.aspx?method=GetArea",
reader: {
type: "json",
root: "data"
}
}
});

//市store
me.cityStore = Ext.create("Ext.data.Store", {
autoSync: false,
fields: [
{ name: "RegionId", type: "int" },
{ name: "RegionName" }
],
proxy: {
type: 'ajax',
url: "../sys/AjaxRegionService.aspx?method=GetArea",
reader: {
type: "json",
root: "data"
}
},
listeners: {
load: function () {
var selectCity = Ext.getCmp('SelectCity').getValue();
if (selectCity != null && selectCity.length > 0) {
var index = me.cityStore.find("RegionId", parseInt(selectCity));
if (index >= 0) {
Ext.getCmp('City').setValue(parseInt(selectCity));
}
}
}
}
}
);

//县store
me.areaStore = Ext.create("Ext.data.Store", {
autoSync: false,
fields: [
{ name: "RegionId", type: "int" },
{ name: "RegionName" }
],
proxy: {
type: 'ajax',
url: "../sys/AjaxRegionService.aspx?method=GetArea",
reader: {
type: "json",
root: "data"
}
},
listeners: {
load: function () {
var selectCity = Ext.getCmp('SelectArea').getValue();

if (selectCity != null && selectCity.length > 0) {
var index = me.areaStore.find("RegionId", parseInt(selectCity));
if (index >= 0) {
Ext.getCmp('Area').setValue(parseInt(selectCity));
}
}
}
}
});

//省
me.province = Ext.create('Ext.form.ComboBox', {
allowBlank: false, flex: 1,
queryMode: "local", id:"Province",
name: "Province", valueField: "RegionId", displayField: "RegionName", store: me.provinceStore,
listeners: {
change: function (f, n, o) {
var p = this.store,
c = me.cityStore,
cb = this.up("form").getForm().findField("City"),
cb1 = this.up("form").getForm().findField("Area");
if (n && n != o) {
cb.setValue();
cb1.setValue();
c.getProxy().extraParams.parentid = n;
c.load();
}
}
}
});

//市
me.city = Ext.create('Ext.form.ComboBox', {
allowBlank: false, flex: 1,
queryMode: "local", id:'City',
name: "City", valueField: "RegionId", displayField: "RegionName", store: me.cityStore,
listeners: {
change: function (f, n, o) {
var p = this.store,
c = me.areaStore,
cb = this.up("form").getForm().findField("Area");
if (n && n != o) {
cb.setValue();
c.getProxy().extraParams.parentid = n;
c.load();
}
}
}
});

//县
me.area = Ext.create('Ext.form.ComboBox', {
allowBlank: false, flex: 1,
queryMode: "local", id:"Area",
name: "Area", valueField: "RegionId", displayField: "RegionName", store: me.areaStore,
});

me.items = [me.province, me.city, me.area, { xtype: 'hiddenfield', name: 'SelectCity', id: 'SelectCity' },
{ xtype: 'hiddenfield', name: 'SelectArea', id: 'SelectArea' }];
me.callParent(arguments);
}
});