deferredRender not working for Ext 4.1.1 Tabpanel

[harman]

REQUIRED INFORMATION



Ext version tested:

• Ext 4.1.1 and
• Ext 4.0.7

Browser versions tested against:

• Chrome 14.0

Description:

• I have A Tab panel which has a panel in each tab. Each panel contains at least a grid.
  When tab panel has a config of deferredRender : false then all the components(grids along with the record rows) on non active tabs also should get rendered and their viewready events must get fired. It works for 4.0.7 but not 4.1.1. It seems as the Rows are not getting rendered while the Grid on non active tab is not visible.

The result that was expected:

• There should be an alert from within the viewready listener of non active tab's grid "ready 2" as soon as we run the code for both Ext 4.0.7 and 4.1.1. The rows should get rendered as well for all the grids.

The result that occurs instead:

• There is no alert for 4.1.1 but there is an alert for 4.0.7.For Ext 4.1.1 It appears only when we navigate to second tab. The grids are rendered but the rows gets rendered only when we navigate to that Tab.

    Ext.create('Ext.data.Store', {
    storeId: 'simpsonsStore1',
    fields: ['name', 'email', 'phone'],
    data: {
        'items': [
            {
            'name': 'Lisa',
            "email": "lisa@simpsons.com",
            "phone": "555-111-1224"},
        {
            'name': 'Bart',
            "email": "bart@simpsons.com",
            "phone": "555-222-1234"},
        {
            'name': 'Homer',
            "email": "home@simpsons.com",
            "phone": "555-222-1244"},
        {
            'name': 'Marge',
            "email": "marge@simpsons.com",
            "phone": "555-222-1254"}
        ]
    },
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});


var grid1 = Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore1'),
    columns: [
        {
        text: 'Name',
        dataIndex: 'name'},
    {
        text: 'Email',
        dataIndex: 'email',
        flex: 1},
    {
        text: 'Phone',
        dataIndex: 'phone'}
    ]
});


Ext.create('Ext.data.Store', {
    storeId: 'simpsonsStore2',
    fields: ['name', 'email', 'phone'],
    data: {
        'items': [
            {
            'name': 'Lisa',
            "email": "lisa@simpsons.com",
            "phone": "555-111-1224"},
        {
            'name': 'Bart',
            "email": "bart@simpsons.com",
            "phone": "555-222-1234"},
        {
            'name': 'Homer',
            "email": "home@simpsons.com",
            "phone": "555-222-1244"},
        {
            'name': 'Marge',
            "email": "marge@simpsons.com",
            "phone": "555-222-1254"}
        ]
    },
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});


var grid2 = Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore2'),
    viewConfig: {
        listeners: {
            viewready: function(thisField) {
                alert("ready 2");
            }
        }
    },
    columns: [
        {
        text: 'Name',
        dataIndex: 'name'},
    {
        text: 'Email',
        dataIndex: 'email',
        flex: 1},
    {
        text: 'Phone',
        dataIndex: 'phone'}
    ]/*,
    listeners: {
        render: function(thisGrid) {
            alert('rendered');
        }
    }*/
});


var panel1 = new Ext.panel.Panel({
    title: 'tab 1',
    layout: 'fit',
    items: [grid1]
});


var panel2 = new Ext.panel.Panel({
    title: 'tab 2',
    layout: 'fit',
    items: [grid2]
});


Ext.create('Ext.tab.Panel', {
    width: 600,
    height: 600,
    activeTab: 0,
    deferredRender: false,
    defaults: { hideMode: 'offsets' },
    items: [
        panel1,
        panel2
        ],
    renderTo: Ext.getBody()
});

HELPFUL INFORMATION


Debugging already done:

• none

Possible fix:

• not provided

Additional CSS used:

• only default ext-all.css

Operating System:

• WinXP

[mitchellsimoens]

Looking at the DOM the grid elements are rendered but the rows of the grid aren't in your test case. If you comment out the deferredRender, the grid elements are not rendered. So the actual issue is the grid isn't rendering it's rows when it is hidden.

[harman]

Very true.
Editing and upgrading the Thread.
I can not edit the title for the Thread so should i close this and log in a new one or this one will do?
Do we have any workaround in sight?

Thanks and Regards

[harman]

Anyone working on this?
Any workaround or temporary fix?

[evant]

You'll want to override the finishRender method in AbstractView.

Just curious, what is the reasoning behind forcing the render of the whole dataset even though it's not visible? Finding it hard to think of a use case for wanting to do so.

[harman]

Just curious, what is the reasoning behind forcing the render of the whole dataset even though it's not visible? Finding it hard to think of a use case for wanting to do so.

I know its kind of weired but its because I am showing some custom display fields in each row of grid depending upon the type of record.
These custom fields take a little time to get created and rendered making loading (not exactly loading but preparing view of grid with components) of grid slow.
I want to take loading time hit on the first time so that by the time user navigates from one tab to another all the fields have already been rendered by then.