Question

我正在进行从4.1.1版到4.2.1版的转换，最后我需要修复最后一个bug。我们有一个gridview，视图被简单的（？）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但没有数据，我想问题可能在于为模板应用了数据。

有人知道可能出现的问题吗？

UPDATE：经过调试和自定义视图模板简化后我发现，即使是自定义视图也设置了自己的商店，它自己的根用于返回的数据，它会忽略该设置并简单地加载Ext.grid.Panel组件的商店的数据。 AJAX响应如下：

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

此处data应该用于Ext.grid.Panel组件，rows应该由自定义视图填充（配置为Ext.XTemplate）。似乎对于子视图总是返回父级商店的根元素。 以任何方式解决此问题并使自定义视图使用自己的商店???

Answer 1

终于找到了解决方案。

问题是，在主grid.Panel加载数据之后，它还将它们分配给它的（子）视图。之后，即使我手动将正确的数据加载到此自定义XTemplate中，它也需要手动覆盖以前渲染的视图。

在我的控制器中（init - ＆gt;渲染）我需要这样做：

    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',

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

ExtJS 4.2.1使用自定义XTemplate覆盖的网格视图不显示任何内容

1 个答案: