Code:
//
// Data Stores
//
var icaGeoDataCountryStore = new Ext.data.Store({
autoLoad: true,
pruneModifiedRecords: true,
url: '/ica/icaGetGeoData.php',
reader: new Ext.data.XmlReader( {
record: "country",
id: "countryName"
}, [ 'countryId', 'countryName' ]
)
});
var icaGeoDataRegionStore = new Ext.data.Store({
pruneModifiedRecords: true,
url: '/ica/icaGetGeoData.php',
reader: new Ext.data.XmlReader( {
record: "region",
id: "regionName"
}, [ 'regionId', 'regionName' ]
)
});
var icaGeoDataCityStore = new Ext.data.Store({
pruneModifiedRecords: true,
url: '/ica/icaGetGeoData.php',
reader: new Ext.data.XmlReader({
record: "city",
id: "cityName"
}, [ 'cityId', 'cityName' ]
)
});
//
// GeoData Combo Box Definitions
//
var icaGeoDataCountryCB = new Ext.form.ComboBox({
id: 'icaGeoDataCountry',
name: 'country',
fieldLabel: 'Country',
store: icaGeoDataCountryStore,
displayField: 'countryName',
mode: 'local',
width: 110,
editable: false,
emptyText: 'Select a country',
triggerAction: 'all',
listeners: {
'select' : function(cmb, rec, idx) {
region = Ext.getCmp('icaGeoDataRegion');
region.clearValue();
region.store.load({
params: {'gd_countryname': Ext.getCmp('icaGeoDataCountry').getValue() }
});
region.enable();
city = Ext.getCmp('icaGeoDataCity');
city.clearValue();
city.store.removeAll();
city.disable();
}
}
});
var icaGeoDataRegionCB = new Ext.form.ComboBox({
id: 'icaGeoDataRegion',
name: 'region',
fieldLabel: 'Region',
store: icaGeoDataRegionStore,
displayField: 'regionName',
mode: 'local',
width: 110,
editable: false,
emptyText: 'Select a region',
triggerAction: 'all',
disabled: true,
listeners: {
'select': function(cmb, data, idx) {
city = Ext.getCmp('icaGeoDataCity');
city.clearValue();
city.store.load({
params: {
'gd_countryname': Ext.getCmp('icaGeoDataCountry').getValue(),
'gd_regionname': Ext.getCmp('icaGeoDataRegion').getValue()
}
});
city.enable();
}
}
});
var icaGeoDataCityCB = new Ext.form.ComboBox({
id: 'icaGeoDataCity',
name: 'city',
fieldLabel: 'City',
store: icaGeoDataCityStore,
displayField: 'cityName',
mode: 'local',
width: 110,
editable: false,
emptyText: 'Select a city',
triggerAction: 'all',
disabled: true
});
var icaGeoDataPanel = new Ext.FormPanel({
id: 'gdPanel',
width: 200,
labelWidth: 60,
items:[
icaGeoDataCountryCB,
icaGeoDataRegionCB,
icaGeoDataCityCB
]
});