PDA

View Full Version : [OPEN-440] Wrong Panel width when having a side dock and being a child of a TabPanel



ficeto
15 Oct 2010, 2:57 PM
Sencha Touch version tested:

0.97

only default ext-all.css




Platform tested against:

iOS 3.x
iOS 4


Description:

when docking a component to the side of a Ext.TabPanel item panel (possibly other card layouts also), the size of the item panel does not change, thus leaving content off the screen. Also could be tested by putting the KitchenSink demo inside a TabPanel


Test Case:



new Ext.TabPanel({
fullscreen: true,
tabBar: {
dock: 'bottom',
ui: 'dark',
layout: {
pack: 'center'
}
},
ui: 'dark',
items: [{
title:'Sample Card',
layout:'fit',
iconCls:'settings',
items:[{
scroll:'both',
html:'<center>Main Panel</center>'
}],
dockedItems:[{
layout:'fit',
dock: 'left',
width:320,
items:[{
html:'<center>Side Panel</center>',
style:{
borderRight:'2px solid #d7d7d7'
}
}]
}]
}]
});


See this URL :


Steps to reproduce the problem:

start a blank project and insert the code above inside the onReady function


The result that was expected:

the width of the main panel should have the width of the side dock substracted


Screenshot or Video:

http://jing.ficeto.com/2010-10-16_0156.png


Debugging already done:

if you produce introduce an exception inside the layoutOrientation method of the tab item panel, the content will have the right width, so I guess that when the parent container (TabPanel) refreshes it's layout, something goes terribly wrong :)
I was able to overcome the problem doing some nasty coding :) really ugly :) so if I extend a panel (like in your Ext.ux.UniversalUI), set it's layout to 'fit', have a single item (an instance of 'card' layout) and overwrite the afterLayout method to the code bellow, the thing starts to work :)


afterLayout : function(layout) {
if(!Ext.is.Phone && Ext.orientation !== 'portrait'){
if(typeof this.items.items[0].getWidth === 'function' && typeof this.items.items[0].setWidth === 'function'){
this.items.items[0].body.setWidth(this.items.items[0].body.getWidth() - 320);//320 is the width of the side docked item
this.items.items[0].doLayout();
}
}
FI.UniversalUI.superclass.afterLayout.call(this, layout);
}



Possible fix:

not provided

BrendanC
18 Oct 2010, 9:36 AM
Thanks for the bug report.

evant
12 Nov 2010, 6:47 PM
This has since been resolved as of RC1:



Ext.setup({
icon: 'icon.png',
glossOnIcon: false,
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
onReady: function(){
var tabs = new Ext.TabPanel({
fullscreen: true,
tabBar: {
dock: 'bottom',
},
items: [{
title: 'Sample Card',
html: 'Main',
dockedItems: [{
layout: 'fit',
dock: 'left',
width: 320,
items: [{
html: '<center>Side Panel</center>',
style: {
borderRight: '2px solid #d7d7d7'
}
}]
}]
}]
});
setTimeout(function(){
var first = tabs.items.first(),
w = first.dockedItems.first().getWidth() + first.body.getWidth();
console.assert(first.getWidth() == w, 'failed');
}, 2000);
}
});


Marking as fixed.