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

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

beforerender的侦听器调用viewController中的函数，在此函数中，我需要加载一个存储和一个回调函数，以根据返回的存储记录更新视图中的变量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'
    }
})

---

我是Extjs新手，这里真的需要一些帮助，提前谢谢

要在

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

---

它正在工作！！非常感谢你！！尽管控制台日志的顺序仍然错误，但视图数据已正确更新！嗯，我遇到了另一个问题。我在tpl html中有一个按钮，并在afterrender注册了一个linstener。如果store.load中的值为true（我用于验证），则会显示此按钮。这里的问题是，现在将呈现tpl html按钮，但它无法注册afterrender函数。不管怎么说，要让它工作起来？我想你应该用小提琴来问这个问题，因为你到目前为止做了什么。这将很容易获得和跟踪您的问题。感谢您的建议，我刚刚创建了一个小提琴，奇怪的是小提琴中的一切都很好，甚至控制台日志顺序。无论如何，我会在这里发布链接仅供参考。非常感谢你的帮助~！我知道问题出在哪里了。fiddle中的存储是本地数据，在实际情况中，存储定义了一个直接代理，它从数据库中读取数据，并且在运行代码时存在延迟。这就是为什么控制台日志顺序错误，并且在寄存器上afterrender函数失败的原因。我想问题又回到了如何定义存储来同步加载数据。

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