PDA

View Full Version : Issues with Refreshing ComboBox when reloading Store...



Wilhelm
26 Mar 2010, 1:09 AM
Hey, all!

I'm having issues with reloading a ComboBox's list items after reloading its Store. What have are two ComboBoxes. The content of the second ComboBox is dependent on what's selected within the first.

Once you make a selection on the first ComboBox, it takes the ID of the record and creates an Ajax-based Store which is assigned to the second ComboBox. I invoke the 'reload' method on the new Store.

Now, the problem is when I select an option from the second ComboBox, the actual list items don't reflect the values in the updated Store. BUT, when I select an item from the ComboBox, the selection text reflects the correct value which corresponds to the latest Store update.

So, my question is, is there a way to actually completely refresh the combobox without recreating it from scratch, so it reflects the values of the new Store?

Thanks!

Animal
26 Mar 2010, 1:18 AM
The DataView (which is what the dropdown list is) should refresh itself when the Store that it is backed by reloads.

Show your code.

Wilhelm
26 Mar 2010, 8:19 PM
Yeah, that's my understanding at least. Anyhow here's some code for your viewing pleasure.

Here is the Store for the first combo box:


PlatformDataStore = new Ext.data.Store(
{
proxy: new Ext.data.HttpProxy
(
new Ext.data.Connection
(
{
url: '/ajaxGateway.php',
method: 'POST',
extraParams:
{
useClass: 'App_PMC_PlatformManagement',
useMethod: 'getPlatformData',
bySite: true
}
}
)
),
reader: new Ext.data.JsonReader(
{
totalProperty: 'total',
root: 'data',
id: 'PLATFORM_ID'
},
Ext.data.Record.create([
{name: 'PLATFORM_ID', type: 'int'},
{name: 'PLATFORM_TITLE', type: 'string'}
]))
});

PlatformDataStore.load();Here are the two ComboBoxes in question. The second one is hidden until a selection is made from the first one. The first time something is selected, the second ComboBox appears and the correct values are displayed.

The problem only occurs when I go back to the first ComboBox and make another selection. The Store in the second ComboBox updates, but the actual list items retain their original values from the first selection.


new Ext.form.ComboBox(
{
store: PlatformDataStore,
hiddenName: 'platform',
displayField: 'PLATFORM_TITLE',
valueField: 'PLATFORM_ID',
mode: 'local',
emptyText: 'Select a platform ...',
fieldLabel: 'Platform',
labelAlign: 'top',
id: 'field-platform',
allowBlank: false,
triggerAction: 'all',
listeners:
{
select: function(ComboBox, Record, index)
{
Component = Ext.getCmp('field-cdn');

this.getCDNStore(Record.get('PLATFORM_ID'), Component);

Component.show();
},
scope: this
}
}),
new Ext.form.ComboBox(
{
lazyInit: true,
hidden: true,
store: null,
hiddenName: 'cdn',
displayField: 'TITLE',
valueField: 'CDN_ID',
mode: 'local',
emptyText: 'Select a CDN ...',
labelAlign: 'top',
id: 'field-cdn',
allowBlank: false,
triggerAction: 'all'
}),Here is the method which updates the Store of the second ComboBox. I'm sure this is the source of the problem although I can't seem to figure out what the deal is.


getCDNStore: function(platform_id, Component)
{
Component.store = new Ext.data.Store(
{
proxy: new Ext.data.HttpProxy
(
new Ext.data.Connection
(
{
url: '/ajaxGateway.php',
method: 'POST',
extraParams:
{
useClass: 'App_PMC_PlatformManagement',
useMethod: 'getCdnByPlatformAndSite',
id: platform_id
}
}
)
),
reader: new Ext.data.JsonReader(
{
totalProperty: 'total',
root: 'data',
id: 'CDN_ID'
},
Ext.data.Record.create([
{name: 'CDN_ID', type: 'int'},
{name: 'TITLE', type: 'string'}
]))
});

Component.store.load();
Component.reset();
Component.collapse();

return true;
},Obviously, I'm no expert in ExtJs, so I wouldn't be surprised if I missed something within the documentation.

Thanks for all the help!

Wilhelm
28 Mar 2010, 3:33 PM
Perhaps, I'll try a different approach.