Question

对于我的移动应用程序，我使用Sencha Touch。我创建了一个显示表格的组件。

我的组件代码：

Ext.define('MyApp.components.table.Table', {
extend: 'Ext.Container',
xtype: 'table',

config: {
cls: 'myTableCSS',
scrollable: 'vertical',
tpl: Ext.create('Ext.XTemplate',
    '<tpl for=".">',
        '<table>',
            '<tr>',
                '<tpl for="headers">',
                    '<th>{html}</th>',
                '</tpl>',
            '</tr>',
            '<tpl for="rows">',
                '<tr>',
                    '<tpl for="columns">',
                            '<td>{html}</td>',
                    '</tpl>',
                '</tr>',
            '</tpl>',
        '</table>',
    '</tpl>'
}
});

我的观点实施代码：

xtype: 'table',
id: 'myRedTable',
data: [
    {
        headers: [
            { html: 'firstname' },
            { html: 'lastname' },
            { html: 'age' }
        ],
        rows: [
            {
                columns: [
                    { html: 'John' },
                    { html: 'Smith' },
                    { html: '38' },
                ]
            }
        ]
    }
],

我的控制器代码，它使AJAX请求从服务器加载数据：

getResultFromServer: function(jsonResult) {
    var persons = jsonResult.getParameter('persons');
    this.getTable().setData(persons);
},

当我加载应用程序并且第一次进入我的屏幕时（在通过AJAX请求从服务器加载数据之后），我的数据显示在屏幕上。

但是，当我导航到应用程序并返回到屏幕时，向服务器发出新请求以刷新屏幕上的数据，但在setData();之后表格未刷新。

如何刷新使用data tpl属性创建的组件的config？

P.S。：我没有store。

Answer 1

我的问题出在其他地方，setData();效果很好。这是Ext.get()方法的缓存问题。

Answer 2

有2个小笔记可以为您提供解决问题的线索：

为什么必须延长Ext.Container，而扩展Ext.dataview.DataView更好？我很确定您想要显示包含相关数据的视图，Ext.DataView是最好的方式。
如果您的视图数据是从data对象填充的，那么如果您使用yourDataView.refresh()方法重新加载数据源并重新渲染视图，它将会正常工作。

希望它有所帮助。

Sencha Touch：如何在setData（）之后刷新组件的数据？

2 个答案: