Question

I have a controller with store, model and view (toolbar) :

Ext.define('Cc.controller.Headers', {
  extend: 'Ext.app.Controller',

  stores: ['User'],
  models: ['Agent'],
  views: ['Header'],


  refs: [
    { ref: 'navigation', selector: 'navigation' },
    { ref: 'tabPanel', selector: 'tabpanel' },
    { ref: 'head', selector: 'head' },
    { ref: 'logoutButton', selector: 'head button[action=logout]'},
    { ref: 'helpButton', selector: 'head button[action=help]'}
  ],

  init: function() {
    this.control({
      'head button[action=logout]': {
        beforerender: this.initLogoutButton,
        click: this.onClickLogoutButton
      },
      'head button[action=help]':{
        click: this.onClickHelpButton
      }
    });
  },

  initLogoutButton: function(a){
    var store = this.getUserStore(),
      button = this.getLogoutButton();
    store.load();
    var user = this.getAgentModel();
    button.setText('Logout ['+user.get('lastname')+']');
    console.log(store.count());
  },

  onClickLogoutButton: function(view, record, item, index, e){
    alert('déconnexion');
  },

  onClickHelpButton: function(view, record, item, index, e){
    alert('help');
  }
});

my problem is in the initLogoutButton function. I need to retrieve the only instance of user I get from ajax request (always only one instance). I can see the request in js console, all is good, but I can’t set variable or array with this data !

In addition, the store.count() function return 0.

Answer 1

If you are using a proxy to load data into your store, you should note that the request asynchronous! you need to set the button text after the store is loaded with data.

store.load({
    scope   : this,
    callback: function(records, operation, success) {
        // check for success and set the value of button        
    }
});

The callback function is called after the store is loaded and then you set the button value.