Accessing 2nd tab of tabpanel

Question

I m getting undefined values while accessing grid rows of 2nd tab of tabpanel.

I have created a tabpanel with the following code:

xtype: 'tabpanel',
border: false,
deferredRender: true,
region: 'center',
activeTab: 0,
items:[{
        id: 'availableoperators',
        itemId: 'ops-operators-grid',
        xtype: 'chat.dashboard.opsmall',
        title: 'Operators',
        region: 'center'
    }, {
        id: 'availableagents',
        itemId: 'ops-agents-grid',
        xtype: 'chat.dashboard.opsmgrid',
        title: 'Agents',
        region: 'center'
    }]

Here I m trying to access rows of 2nd panel:

var opsGrid = Ext.getCmp('availableagents');
var records = opsGrid.store.getRange(0, opsGrid.store.getTotalCount());
for(var i = 0; i < records.length; i++) {
    var row = opsGrid.getView().getRow(i);
}

The above code is working fine only if I use id of first tab. Any help would be appreciated.

Answer 1

It happens because component on the tab will be rendered at first shown. Store by default will be loaded after rendering of the grid on this tab. So you don't have rendered markup (the opsGrid.getView()) and don't have loaded data at store untill you opened the tab. If you will open second tab and manually run your code it should work fine.

Try to set deferredRender to false for the tabpanel, or forceLayout to true for your second tab. It will force rendering and loading all tabs (deferredRender:false) or only tab, there you will set forceLayout.