View Full Version : Tabpanel tabs are not rendered at once in safari

29 Apr 2013, 10:46 PM
I have a tabpanel in ExtJS with multiple tabs containing FusionCharts. I want to render all the tabs at one time and not when user clicks each tab. This only fails to render all tabs in Safari.

Ext.create('Ext.tab.Panel', {
id: 'tbPnl',
deferredRender: false,
layout: 'card',
layoutOnTabChange: true,
hideMode: 'offsets',

renderTo: 'reportDiv',
//autoScroll: true,
width: 1400,
flex: 1,
//height: '100%',
height: 1200
//margin: 20,


1 May 2013, 2:08 PM
The following snippet worked for me in Chrome and Safari in 4.2 and 4.2.1 Beta. The rendering of each panel was not deferred until the tab was clicked:

Ext.create('Ext.tab.Panel', {
deferredRender: false,
renderTo: Ext.getBody(),
width: 500,
height: 500,
defaults: {
listeners: {
afterrender: function (p) {
items: [{
title: 'One'
}, {
title: 'Two'

6 May 2013, 4:47 AM
This approach doesn't seem any diferent from what I have implemented.
I added listener afterrender already in which tab content is prepared and rendered.

here is a snippet which is used after previous code.

6 May 2013, 8:16 PM
My snippet didn't work for you in Safari? What version?
I'm testing in 6.0.4 on OSX 10.8.3 with ExtJS 4.2 and Beta (latest Nightly) and both child panels render immediately when the tabpanel is instantiated.