ExtJS 4.2.1 Grid view overriden with custom XTemplate shows nothing

Question

I am working on a switch from version 4.1.1 to 4.2.1 and finally I need to fix hopefully the last bug. We have a gridview with view being overriden by simple (?) Ext.XTemplate, as follows:

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

This view is set for the grid in this way:

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

        //...
    }
}

Then in controller onRender the stores gets populated (the store of the grid is AJAX, loads the data and passes them to a memory store of the view). In ExtJS 4.1.1 this is working properly, data are loaded and the template is parsed and HTML is displayed containing the data.

But after the switch to 4.2.1 the HTML is no longer filled with the data and nothing is displayed but an empty HTML table (which appears as like nothing would be rendered). As there is at least some part of HTML but no data, I guess the problem might be with the data being applied for the template.

Does anybody know what might be/went wrong?

UPDATE: After debugging and the custom view template simplification I have found out, that even the custom view has set it's own store with it's own root for the data returned, it ignores that setting and simply loads the data for the store of the Ext.grid.Panel component. The AJAX response looks like:

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

Here the data should be used for Ext.grid.Panel component and the rows should be then populated by the custom view (configured with Ext.XTemplate). Seems like for the children views always the parent's store's root element is returned. Any way how to workaround this behaviour and make the custom view to use it's own store???

shadyyx shadyyx · Accepted Answer · 2013-08-16T15:26:23

Finally found a solution.

The problem was that after the main grid.Panel loaded the data it distributed them also to it's (sub)view. After that even I had manually loaded the right data into this custom XTemplate, it needed to also manually override previously rendered view.

In my controller (init -> render) I needed to do this:

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

This is kinda strange as I thought that with a definition within a custom view (see my question above)

tplWriteMode: 'overwrite',

it should just automatically overwrite it's view...

ExtJS 4.2.1 Grid view overriden with custom XTemplate shows nothing

1 Answers