Problem with Viewport, Card-Layout after Update 3.0 to 3.3.1

[giraffezw]

Hi,

after the Update from 3.0 to 3.3.1 it seem's that something has changed in the rendering process.
Before the update I didnt use the deferredRender: true config inside the tabpanel and everything was rendering without a problem.
The components get rendered during the loading process of the viewport.
Now (3.3.1) when the viewport gets rendered all items of the cardlayout are rendered first on top of the site (see screenshot). After rendering the site looks "normal" again.
To get thinks work, I have to use deferredRender: true. But the defered rendering looks really ugly and some things got broken, cause panels are not there yet, when a user clicks the treepanel, which sets the activeitem inside the cardpanel.



var showViewport = function() {
viewport1 = new Ext.Viewport({
id: 'viewport',
border : false,
layout : 'ux.center',
items : [tabsNestedLayouts],
renderTo: Ext.getBody()
});

viewport1.doLayout();
};


the tabsNestedLayouts looks like:
(property, options, ... seemed useless for this example and have been deleted)


var tabsNestedLayouts = {
xtype: 'panel'
,id: ''
,width:"100%"
,layout: 'border'
,items: [{
region: 'north'
,height: 80
,maxSize: 80
,split: true
,contentEl: ''
},{
xtype: 'tabpanel'
,id:''
,plain: true
,region: 'center'
,activeTab: 0
,items: [{
layout: 'border'
,hideMode: Ext.isIE ? 'offsets' : 'display'
,items: [
treePanel
,{
xtype: 'panel'
,id: ''
,layout: 'card'
,layoutConfig: {
deferredRender: true
}
,region:'center'
,border: false
,activeItem: 0
,items: [
{
xtype: 'documentgrid'
},{
xtype: 'formulargrid'
},{
xtype: 'usergrid'
},{
xtype: 'contactgrid'
},{
xtype: 'messagegrid'
}
]
},{
xtype:'panel'
,id: ''
,region: 'south'
,autoScroll: true
,html: ''
,plugins: new Ext.ux.collapsedPanelTitlePlugin()
}]
}]
}]
};

[dj]

Some suggestions:



the viewport1 renderTo property is redundant. Ext.Viewports always get rendered to the body.
explicitly calling viewport1.doLayout() should not be necessary - it gets called in the constructor of the Ext.Viewport anyway.
why do you change the hideMode of the panel in the tab panel?
there is some unnecessary nesting going on there. You could get rid of the first nesting level. And only one child item in the TabPanel (why a TabPanel anyway?) is not optimal either
Having the same id assigned to different components can lead to some very strange bugs (I assume that your actual code has more meaningful id properties - but checking their uniqueness doesn't hurt)




This is your layout without the unnecessary nesting:


var showViewport = function() {
viewport1 = new Ext.Viewport({
id: 'viewport',
border: false,
layout: 'border',
items: [{
region: 'north'
,height: 80
,maxSize: 80
,split: true
,contentEl: ''
}, treePanel // assuming treePanel has region: 'west' or 'east'
, {
xtype: 'panel'
, layout: 'card'
, region: 'center'
, border: false
, activeItem: 0
, items: [{
xtype: 'documentgrid'
}, {
xtype: 'formulargrid'
}, {
xtype: 'usergrid'
}, {
xtype: 'contactgrid'
}, {
xtype: 'messagegrid'
}]
}, {
xtype: 'panel'
, region: 'south'
, autoScroll: true
, html: ''
, plugins: new Ext.ux.collapsedPanelTitlePlugin()
}]
});
};
Hopefully this steers you in the right direction to find your rendering bug.

[giraffezw]

Hi Daniel,

thank you for your answer.
There are more tabs then listed in the example source code.
Double calling doLayout wasn't the problem.

The same code works well with ext 3.0.0.

[giraffezw]

Hi,

the problem only occurs in extended ext classes which are using a Ext.PagingToolbar inside initComponent function.

Example:


initComponent:function() {

Ext.apply(this, {
bbar : new Ext.PagingToolbar({...})
});


The problem does not happen, when the toolbar ist instantiated in the following manner:


Ext.company.Document = Ext.extend(Ext.grid.GridPanel, {

bbar : new Ext.PagingToolbar({
,store: Ext.StoreMgr.get('dstore')
,displayInfo: true
,displayMsg: 'Ergebnis {0} - {1} von {2}'
,emptyMsg: "Keine Ergebnisse gefunden"
})
....

[dj]

I'm not sure why that causes a problem - seems like the renderTo of the Ext.Viewport interferes with the normal Ext rendering process.

Anyways, just move the bbar-config from initComponent to constructor.



MyClass = Ext.extend(Ext.Panel, {
constructor: function(config){
this.bbar = new Ext.PagingToolbar({
,store: Ext.StoreMgr.get('dstore')
,displayInfo: true
,displayMsg: 'Ergebnis {0} - {1} von {2}'
,emptyMsg: "Keine Ergebnisse gefunden"
});
MyClass.superclass.constructor.apply(this, arguments);
},
initComponent: function(){
// other init stuff
MyClass.superclass.initComponent.apply(this, arguments);
}
});

[giraffezw]

ok, render the problem is gone.
But now when I press the refresh-button in the Toolbar, I get the error "this.store is undefined" @ext-all-debug.js

"this" is the window, not the GridPanel!?

[dj]

You could try to swap the execution order in the constructor:


MyClass = Ext.extend(Ext.Panel, {
constructor: function(config){
MyClass.superclass.constructor.apply(this, arguments);
this.bbar = new Ext.PagingToolbar({
,store: Ext.StoreMgr.get('dstore')
,displayInfo: true
,displayMsg: 'Ergebnis {0} - {1} von {2}'
,emptyMsg: "Keine Ergebnisse gefunden"
});
},
initComponent: function(){
// other init stuff
MyClass.superclass.initComponent.apply(this, arguments);
}
});


In case that doesn't help, I'm afraid I cannot help you without a test case with which I can reproduce the error on my machine.

[giraffezw]

does't help :(( what did you need for a test case?

[dj]

Here is a description on how to create a working showcase: http://www.sencha.com/learn/Ext_Forum_Help#Posting_a_working_showcase
Try to reproduce the problem with the least possible code.