PDA

View Full Version : store.loadData of ComboBox before the combo has been clicked doesn't update the list



larf311
27 Oct 2011, 8:36 AM
ExtJS Version: 4.0.7

Calling loadData on the store of a ComboBox doesn't update the combo unless you've already clicked the drop down. I've traced it down to the fact that the datachanged event on the AbstractView doesn't appear to get bound until you click on the drop down. Hence, when calling loadData on the data store, the datachanged event fires, but the combo doesn't pick it up.

The trivial example below will demonstrate. Choosing a value from the first combo should populate the second but it doesn't UNLESS you've already clicked on the second drop down.

Am I doing something wrong?


var stateStore = new Ext.data.Store({
idIndex: 0,
fields: [
{name: 'id'},
{name: 'label'}
],
data: [{id : 0, label: 'Georgia'}, {id : 1, label : 'Florida'}]
});
var stateCombo = Ext.create('Ext.form.field.ComboBox', {
id: 'stateCombo',
autoDestroy: true,
fieldLabel: 'choose state',
displayField: 'label',
store: stateStore,
mode: 'local',
triggerAction: 'all',
valueField: 'id',
renderTo: Ext.getBody(),
listeners: {
'select': function(combo, records, opts) {
var widget = Ext.getCmp('cityCombo'),
store = widget.getStore();
store.loadData([{id: '0', label: 'Atlanta'}]);
}
}
});
var cityStore = new Ext.data.Store({
idIndex: 0,
fields: [
{name: 'id'},
{name: 'label'}
],
data: []
});
var cityCombo = Ext.create('Ext.form.field.ComboBox', {
id: 'cityCombo',
autoDestroy: true,
fieldLabel: 'choose city',
displayField: 'label',
store: cityStore,
mode: 'local',
triggerAction: 'all',
valueField: 'id',
renderTo: Ext.getBody()
});

larf311
27 Oct 2011, 8:48 AM
Answer: Yes I was doing something wrong. This code was left over from ExtJS 3.x and in ExtJS 4.x mode is now queryMode.

infarbe
29 Oct 2011, 3:15 AM
ComboBox doesn't update the combo unless you've already clicked the drop down. I've traced it down to the fact that the datachanged event on the AbstractView doesn't appear to get bound until you click on the drop down. Hence, when calling loadData on the data store, the datachanged event fires, but the combo doesn't pick it up.


I have the same Problem. I use a remote store and loading it upon showing a modal window:


var qualifikationen = [];
Ext.Array.each( record.get('Qualifikationen'), function (element) {
qualifikationen.push(element.id);
});

var comboBox = modalWindow.down( '#qualifikationen' );
this.getQualifikationenStore().load({
scope : this,
callback: function(records, operation, success) {
comboBox.setValue( qualifikationen );
modalWindow.show();
}
});


So far this works as the Combobox displays the right values.
But as soon as I click on the Triggerbutton the store reloads, I see my items selected under the loading mask when it finished Loading everything is deselected and I lost my values.

Do you have any clues?

Spenna
3 Nov 2011, 6:21 AM
But as soon as I click on the Triggerbutton the store reloads, I see my items selected under the loading mask when it finished Loading everything is deselected and I lost my values.

I'm having the exact same issue.

Spenna
4 Nov 2011, 4:43 AM
I solved my problem by setting queryMode : 'local' on the combo. (since data was explicitly loaded already in the store itself)

infarbe
8 Nov 2011, 3:11 AM
That may be true for some cases maybe I have an error in reasoning.
Think about a (tag) list with 100 entries, paged on 50 and delivered from the server.
In this case it wouldn't be local but remote.

hmm I just wondered why the store reloads itself on click even though it was already loaded before and than looses its selection.