Ext.onReady(function () {
Ext.define("ProvinceCity", {
extend: "Ext.data.Model",
fields: [
{ name: "ProvinceName", type: "string" },
{ name: "CityName", type: "string" }
]
});
var store = Ext.create("Ext.data.Store", {
model: "ProvinceCity",
//autoLoad: true,//进行手动加载
proxy: {
type: "ajax",
url: "test2.aspx",
reader: {
type: "xml",
record: "Table"
}
}
});
var data;
var dataStore = new Array();
store.load({
scope: this,
callback: function (records, operation, success) {
data = store.collect("ProvinceName"); //因为省份有重复的选项，要把其中重复的选项去掉
Ext.Array.each(data, function (item) {
dataStore.push({ 'ProvinceName': item });
});
}
});
var store1 = Ext.create("Ext.data.Store", {
fields: ["ProvinceName"],
data: dataStore,
proxy: {
type: "memory"
}
});
var store2 = Ext.create("Ext.data.Store", {
model: "ProvinceCity",
proxy: {
type: "memory"
}
});
Ext.create("Ext.form.Panel", {
id: "form1",
renderTo: Ext.getBody(),
bodyPadding: 10,
width: "auto",
title: "Please Choose Province And City",
layout: {
type: "hbox",
align: "left"
},
items: [
{ xtype: "combobox", id: "provinceName", fieldLabel: "ProvinceName", store: store1, valueField: "ProvinceName", displayField: "ProvinceName", padding: 10, listeners: { "select": function (comboBox, record, index) {
var temp = store.queryBy(function (record, id) {
if (record.get("ProvinceName") == comboBox.getValue()) {
return true;
}
});
store2.removeAll();
store2.add(temp.items);
Ext.getCmp("cityName").clearValue();
Ext.getCmp("cityName").bindStore(store2);
}
}
},
{ xtype: "combobox", fieldLabel: "CityName", id: "cityName", padding: 10, valueField: "ProvinceName", displayField: "CityName"}]
});
});
