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