PDA

View Full Version : Problem with Viewport, Card-Layout after Update 3.0 to 3.3.1



giraffezw
14 Mar 2011, 6:56 AM
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
14 Mar 2011, 8:26 AM
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
14 Mar 2011, 8:44 AM
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
15 Mar 2011, 2:52 AM
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
15 Mar 2011, 9:12 AM
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
18 Mar 2011, 2:30 AM
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
19 Mar 2011, 9:10 AM
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
21 Mar 2011, 2:28 AM
does't help :(( what did you need for a test case?

dj
21 Mar 2011, 8:45 AM
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.