用自定义 XTemplate 覆盖的 ExtJS 4.2.1 网格视图显示什么

Question

我正在从版本 4.1.1 切换到 4.2.1，最后我需要修复最后一个错误。我们有一个网格视图，其视图被简单的 (?) Ext.XTemplate 覆盖，如下所示：

Ext.define('view.monitoring.Event',
{
    extend: 'Ext.view.View',
    alias: 'widget.default_monitoring_event',

    itemSelector: '.monitoring-thumb-fumb',

    tplWriteMode: 'overwrite',
    autoWidth: true,

    initComponent: function()
    {
        var tplPart1 = new Ext.XTemplate('<SOME HTML 1>');
        var tplPart2 = new Ext.XTemplate('<SOME HTML 2>');
        var tplPart3 = new Ext.XTemplate('<SOME HTML 3>');
        var tplPart4 = new Ext.XTemplate('<SOME HTML 4>');

        this.tpl = new Ext.Template('<BUNCH OF HTML AND TPL and TPL INSIDE TPL',
            callFunc1: function(data) { /* do something with tplPart1 */ },
            callFunc2: function(data) { /* do something with tplPart2 */ },
            callFunc3: function(data) { /* do something with tplPart3 */ },
            callFunc4: function(data) { /* do something with tplPart4 */ },
        );

        this.callParent(arguments;
    }
}

这个视图是这样为网格设置的：

Ext.define('view.monitoring.WeeklyOverview',
{
    extend: 'Ext.grid.Panel',
    alias: 'widget.default_monitoring_weeklyoverview',
    layout: 'border',
    title: Lang.translate('event_monitoring_title'),
    overflowX: 'hidden',
    overflowY: 'auto',

    initComponent: function()
    {
        //...

        this.view = Ext.widget('default_monitoring_event', {
            store: Ext.create('store.monitoring.Rows')
        });

        //...
    }
}

然后在控制器onRender 中填充存储（网格的存储是 AJAX，加载数据并将它们传递到视图的内存存储）。在 ExtJS 4.1.1 中，这可以正常工作，加载数据并解析模板并显示包含数据的 HTML。

但是在切换到 4.2.1 之后，HTML 不再填充数据，并且什么都没有显示，而是一个空的 HTML 表（看起来好像什么都不会呈现）。由于至少有一部分 HTML 但没有数据，我想问题可能出在模板中应用的数据上。

有人知道可能出了什么问题吗？

更新：在调试和自定义视图模板简化后，我发现，即使自定义视图也设置了自己的存储，并为返回的数据设置了自己的根，它忽略了该设置，只是简单地为Ext.grid.Panel 组件的存储加载数据。 AJAX 响应如下所示：

{
    user: {},
    data: [
        0: { ... },
        1: { ... },
        ...
    ],
    rows: [
        0: { ... },
        1: { ... },
        ...
    ]
}

这里data 应该用于Ext.grid.Panel 组件，然后rows 应该由自定义视图填充（配置为Ext.XTemplate）。似乎对于子视图总是返回父商店的根元素。 如何解决此问题并让自定义视图使用它自己的商店？？？

Answer 1

终于找到了解决办法。

问题是在主grid.Panel 加载数据后，它也将它们分发到它的（子）视图。在那之后，即使我已经手动将正确的数据加载到这个自定义 XTemplate 中，它也需要手动覆盖以前呈现的视图。

在我的控制器（初始化 -> 渲染）中，我需要这样做：

    var me = this;
    this.getMainView().store.load({
        params: params || {},
        callback: function(records, operation, success) {
            // this line was already there, working properly for ExtJS 4.1.1, probably is now useless for ExtJS 4.2.1 with the next line
            me.getCustomView().store.loadRawData(this.proxy.reader.rawData);
            // I had to add this line for ExtJS 4.2.1...
            me.getCustomView().tpl.overwrite(me.getCustomView().el, this.proxy.reader.rawData.rows);
        }
    });

这有点奇怪，因为我认为在自定义视图中定义（请参阅上面的问题）

tplWriteMode: 'overwrite',

它应该只是自动覆盖它的视图...