Question

There are menu button (“clients”), tree panel with clients list (sorted by name) and viewer with selected client details. There is also selectionchange action..

My task – on button click switch to client view and select and load details for first client every time button has been clicked. My problem – store is not loaded, how waiting until ext js will autoload data to the store?

my controller code:

    me.control({
        '#nav-client': {
            click: me.onNavClientClick
        },
    ...
        'clientlist': {
        //    load: me.selectClient,
            selectionchange: me.showClient
        }
    });

    onNavClientClick: function(view, records) {
        var me = this,
            content = Ext.getCmp("app-content");
        content.removeAll();
        content.insert(0, [{xtype: 'clientcomplex'}]);
        var first = me.getClientsStore().first();

        if (first) {
            Ext.getCmp("clientList").getSelectionModel().select(me.getClientsListStore().getNodeById(first.get('clientId')));
        }
    },
...

Two main questions:

• is it good solution in my case? (to select first client in tree panel)

  var first = me.getClientsStore().first(); 
  // i use another store to get first record because of i dont know how to get first record (on root level) in TreeStore
  ...
  Ext.getCmp("clientList").getSelectionModel().select(me.getClientsListStore().getNodeById(first.get('clientId')));
  

i know this code works ok in case of “load: me.selectClient,” (but only once),

• if i place this code on button click – i see error

  Uncaught TypeError: Cannot read property 'id' of undefined
  

because of me.getClientsListStore() is not loaded.. so how to check loading status of this store and wait some until this store will be completely autoloaded?..

Thank you!

Answer 1

You can listen the store ‘load’ event. Like this:

...
onNavClientClick: function(view, records) {
  var me = this;

  // if the store isn't loaded, call load method and defer the 'client view' creation
  if (me.getClientsStore.getCount() <= 0) {
    me.getClientsStore.on('load', me.onClientsStoreLoad, me, { single : true});
    me.getClientsStore.load();
  }
  else {
    me.onClientsStoreLoad();
  }
},

onClientsStoreLoad : function () {
    var me = this,
        content = Ext.getCmp("app-content");
    content.removeAll();
    content.insert(0, [{xtype: 'clientcomplex'}]);
    var first = me.getClientsStore().first();

    if (first) {
        Ext.getCmp("clientList").getSelectionModel().select(me.getClientsListStore().getNodeById(first.get('clientId')));
    }
},
...