Ext.data.Store also loads the data (a second time) when combobox is used

[jeanluca]

Hi All

I noticed that when I have

var genres = new Ext.data.Store({
reader: new Ext.data.JsonReader({
fields: ['id', 'genre_name'],
root: 'rows'
}),
proxy: new Ext.data.HttpProxy({
url: 'genres.php'
}),
autoLoad: true,

listeners : {
load: function(obj, records) {
console.log("data loaded") ;
}
}
}) ;

and a combobox (which used 'genres') setup like

var config = {
xtype: 'combo',
name: 'genre',
fieldLabel: 'Genre',
mode: 'remote',
displayField: 'genre_name',
triggerAction: 'all',
loadMask: true,
editable: false,
width: 120
} ;
the data is loaded fine during initialization. Now when I click the combo-box, the data is loaded again.
So to fix this I added the following line to the load function:


config.mode = 'local' ;

It didn't work, so I think that when the combo is initialized the config parameter isn't used anymore.
Any suggestions how to fix this ?

cheers
Luca

[jeanluca]

I found a solution (it looks more like a hack)
The FormPanel, which has the combobox as one of its items, is stored in a variable called 'movie_form'.
So if I modify the correct item (the combobox is stored as item nr 5) I can do:

movie_form.items.items[5].mode = 'local' ;
As I said, looks like a hack to me, is there an other way to do this ?

[Condor]

If you define your store with autoLoad:true then you can simply configure your combobox with mode:'local' from the start.

[jeanluca]

Thats not true. You need the mode: 'remote' because when you use the combo before the data is loaded, it shows a message 'loading'
If you have instead mode: 'local' the combo doesn't show anything, leaving the user no clues about whats going on

[Condor]

Configure your combobox with mode:'local' and the store with autoLoad:false.

Next, add a beforequery event handler that loads the store if it hasn't been loaded yet, e.g.

combobox.on('beforequery', function(qe){
var store = qe.combo.store;
if (!Ext.isDefined(store.totalLength)) {
if(store.lastOptions === null){
store.load();
}
return false;
}
});
(warning: untested code!)

[jeanluca]

ok, but how do you integrate that if you define your combobox like:


movie_form = new Ext.FormPanel({
url: 'movie-form-submit.php',
renderTo: Ext.fly('xyz'),
frame: true,
title: 'Movie Information Form',
width: 250,
items: [{ xtype: 'textfield',
fieldLabel: 'Title',
name: 'title',
allowBlank: false
},
{ xtype: 'textfield',
fieldLabel: 'Director',
name: 'director',
vtype: 'name'
},
{ xtype: 'datefield',
fieldLabel: 'Released',
name: 'released',
disabledDays: [1,2,3,4,5]
},
{ xtype: 'radio',
fieldLabel: 'Filmed In',
name: 'filmed_in',
boxLabel: 'Color'
},
{ xtype: 'radio',
hideLabel: false,
labelSeparator: '',
name: 'filmed_in',
boxLabel: 'Black & White'
},
{
xtype: 'combo',
name: 'genre',
fieldLabel: 'Genre',
mode: 'local',
displayField: 'genre_name',
triggerAction: 'all',
loadMask: true,
editable: false,
width: 120
}

]
});

[Condor]

{
xtype: 'combo',
name: 'genre',
fieldLabel: 'Genre',
mode: 'local',
displayField: 'genre_name',
triggerAction: 'all',
loadMask: true,
editable: false,
width: 120,
store: new Ext.data.Store({
url: '...',
reader: ...
}),
listeners: {
beforequery: function(qe){
var store = qe.combo.store;
if (!Ext.isDefined(store.totalLength)) { // if store is not loaded
if(store.lastOptions === null){ // if store is not already loading
store.load();
}
return false; // stop and wait for the store to load
}
}
}
}

[jeanluca]

I've implemented it and turned autoload off. So, the loading starts when you click the combo. It loads the data and shows it. But I noticed two problems: 1) there is no message which informs the user its loading and 2) it only works once, if you try to pull down the combo again its empty

cheers