PDA

View Full Version : Refresh ComboBox after applying filterBy on Store



dijksvi
18 Mar 2011, 8:00 AM
Hi,

I have a panel with two combo boxes. The first box shows the countries, and the second one the regions if the countries happen to have regions. Both combo boxes have stores representing all countries and all regions.

What I'm trying to achieve is to filter the regions based on the selected countries. (note that my regionStore loads all regions).

So on the "select" event of the country combo I filter the regions using the "regionCombo.getStore().filterBy(...)" method. Debugging the method that's gets called for each region in the regionStore, I nicely see that only those for the given country are selected.

So far so good, if not that the display keeps listing all countries. Somehow I get the impression that I need to refresh the regionCombo, but how ? Am I missing something ?

Look forward for some help.

Thanks,

Vincent

See here the code:



Imi.ui.CountryRegionContainer = Ext.extend(Ext.Container, {

messageModel: new Imi.model.MessageModel(),

constructor: function(config) {

this.countryStore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: '/countries.json',
method: 'GET'
}),
reader: new Ext.data.JsonReader({
fields: [
{name: 'value', mapping: 'name'},
{name: 'id', mapping: 'code'},
{name: 'regional', mapping: 'regional'}
]
})
});
this.countryStore.load();

this.regionStore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: '/regions.json',
method: 'GET'
}),
reader: new Ext.data.JsonReader({
fields: [
{name: 'value', mapping: 'region'},
{name: 'id', mapping: 'id'},
{name: 'countryCode', mapping: 'countryCode'}
]
})
});
this.regionStore.load();

Imi.ui.CountryRegionContainer.superclass.constructor.call(this, config);


},
initComponent: function() {

var countryCombo = new Ext.form.ComboBox({
name : 'visibleName',
hiddenName : 'hiddenName',
width : 300,
store: this.countryStore,
valueField: 'id',
displayField: 'value',
typeAhead: true,
editable: false,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
selectOnFocus:true
});

var regionCombo = new Ext.form.ComboBox({
name : 'visibleName',
hidden: true,
hiddenName : 'hiddenName',
width : 300,
//value: 'countryCode',
store: this.regionStore,
valueField: 'id',
displayField: 'value',
typeAhead: true,
editable: false,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
selectOnFocus:true
});

var separator = new Ext.Container({
unstyled: true,
hidden: true,
cls: 'lyt-small-separator'
});

countryCombo.on('select', function(comboBox, country, index) {
if (country.data.regional) {

regionCombo.getStore().filterBy(function(region, id) {
var regCode = region.get('countryCode');
var selected = (regCode == country.data.id);
return selected;
});

separator.show();
regionCombo.show();

Imi.ui.CountryRegionContainer.superclass.doLayout();
} else {
separator.hide();
regionCombo.hide();
}
});

regionCombo.on('beforerender', function(combo) {

});

this.items = [
countryCombo,
separator,
regionCombo
];

Imi.ui.CountryRegionContainer.superclass.initComponent.call(this);
}

});