Question

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

一个prerender侦听器调用viewController中的一个函数，在这个函数中，我需要加载一个存储区和一个回调函数，以基于返回的存储记录来更新视图中的变量testname。

我遇到的问题是代码执行的顺序。在执行store.load回调之前，viewController中的函数始终首先结束。因此，前视图将永远不会更新。我试图将异步加载设置为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

要在加载tpl之后更新store，必须调用如下的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

1 个答案: