title: ExtJS 6.01 How to update tpl after store loaded
body: <p>Let's say I have a component with tpl in HTML format, which has a variable named testname, default value is null.</p>
  
  <p>A listener of beforerender calls to a function in viewController, and in this function, I need to load a store and a callback function to update the variable testname in the view, based on the store record returned.</p>
  
  <p>The problem I met is the order of code execution. The function in the viewController always ended first before the store.load callback get executed. Therefore the front view will never get updated. I have tried to setup the asynchronousLoad to false but it doesn't help.</p>
  
  <p>Here is the code in the viewController.</p>
  
  <pre><code>onViewRendering: function(theView) {
      console.log('setp 1');
      var theStore = Ext.create('App.store.Test');
      theStore.load({
          asynchronousLoad: false,
          callback: function(record) {
              console.log('setp 2');
              if (record) {
                  theView.data.testname = 'updated';
              }
          }
      });
      console.log('setp 3');
  }
  </code></pre>
  
  <p>Console log displays in step 1, 3, 2.</p>
  
  <p>And here is the code in the View:</p>
  
  <pre><code>Ext.define('App.view.TestView', {
      extend: 'Ext.component',
      data:{
          testname:null
      },
      tpl:'&lt;p&gt;{testname}&lt;/p&gt;',
      listeners: {
          beforerender: 'onViewRendering'
      }
  })
  </code></pre>
  
  <p>Here is the store code:</p>
  
  <pre><code>Ext.define('App.store.Test', {
      extend: 'Ext.data.Store',
      alias: 'store.test',
      autoLoad: true,
      remoteFilter: true,
      fields: ['id', 'name'],
      proxy: {
          type: 'direct',
          directFn: 'test.getTest'
      }
  })
  </code></pre>
  
  <p>I am new to Extjs and really need some help here, thanks in advance!</p>