ExtJS 6.01 如何在存储加载后更新 tpl

Question

假设我有一个 HTML 格式的 tpl 组件，它有一个名为 testname 的变量，默认值为 null。

beforerender的监听器调用了viewController中的一个函数，在这个函数中，我需要加载一个store和一个回调函数来根据返回的store记录更新视图中的变量testname .

我遇到的问题是代码执行的顺序。 viewController 中的函数总是在 store.load 回调执行之前先结束。因此，前视图永远不会更新。我尝试将 asynchronousLoad 设置为 false，但没有用。

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

控制台日志显示在步骤 1、3、2 中。

视图中的代码如下：

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

这是商店代码：

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

我是 Extjs 的新手，在这里真的需要一些帮助，在此先感谢！

Answer 1

要在 store 加载后更新 tpl，您必须调用 setData 方法，如下所示：

代码片段：

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

ExtJS 6.01 如何在存储加载后更新 tpl

ExtJS 6.01 How to update tpl after store loaded

load

asynchronous

extjs

store