ExtJS 6.01 How to update tpl after store loaded

Question

Let's say I have a component with tpl in HTML format, which has a variable named testname, default value is null.

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.

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.

Here is the code in the viewController.

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');
}

Console log displays in step 1, 3, 2.

And here is the code in the View:

Ext.define('App.view.TestView', {
    extend: 'Ext.component',
    data:{
        testname:null
    },
    tpl:'<p>{testname}</p>',
    listeners: {
        beforerender: 'onViewRendering'
    }
})

Here is the store 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'
    }
})

I am new to Extjs and really need some help here, thanks in advance!

Answer 1

To update tpl after store load, you have to call setData method like below:

Code snippet:

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.setData({testname: 'updated'}); //setData method
            }
        }
    });
    console.log('setp 3');
}