PDA

View Full Version : Problem with adding or remove docked Items after resizing



mbalsam
13 Oct 2011, 12:14 AM
Sencha Touch version tested:

1.1.0


only default ext-all.css
Platform tested against:

iPad
Chrome
Description:

A TabPanel is the applications Viewport containing at least one Panel
This Panel has another Panel docked left which contains a List and a Toolbar docked top
Furthermore this Panel has a Toolbar docked top which contains a Button to remove the docked list panel and add it again respectively
If the size of the Viewport is changed (e.g. orientation change) and the list panel is removed and then added again it doesn't show correctly
Before resizing removing and adding again works perfectly
Without the TabPanel (using the contained Panel as the Viewport) everything works perfectly also after resizing
Conclusion: TabPanel related bug.
Test Case:
Ext.regApplication({ name: 'app',

launch: function () {
Ext.regModel('ListItem', {
fields: [
{name: 'text', type: 'string'}
]
});
var listStore = new Ext.data.Store({
model: 'ListItem',
data : [
{
text: 'Item1'
},
{
text: 'Item2'
},
{
text: 'Item3'
}
]
})
app.views.viewport = new Ext.TabPanel({
fullscreen: true,
tabBar: {
layout: {
type: 'hbox',
align: 'center',
pack: 'center'
}
},
tabBarDock: 'bottom',
items: [
{
id: 'tab1',
xtype: 'panel',
iconCls: 'favorites',
title: 'Tab 1',
dockedItems: [
// list panel
{
id: 'listPanel',
xtype: 'panel',
dock: 'left',
width: 300,
style: 'border-right: 1px solid;',
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
title: 'List'
}
],
items: [
{
xtype: 'list',
itemTpl: '<p>{text}</p>',
store: listStore
}
]
},
// toolbar
{
xtype: 'toolbar',
dock: 'top',
title: 'Tab 1',
items: [
{
xtype: 'button',
text: 'hide list',
removed: false,
handler: function () {
if(!this.removed) {
this.up('#tab1').removeDocked(Ext.getCmp('listPanel'), false);
this.removed = true;
this.setText('show list');
} else {
this.up('#tab1').addDocked(Ext.getCmp('listPanel'), 0);
this.removed = false;
this.setText('hide list');
}
}
}
]
}
]
},
{
xtype: 'panel',
iconCls: 'action',
title: 'Tab 2',
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
title: 'Tab 2'
}
]
}
]
});
}
});

See this URL : http://
(http://)
Steps to reproduce the problem:

Create a TabPanel containing a Panel with a top-docked Toolbar and a left-docked Panel containing a List
change the size of the Viewport (in Chrome e.g. show the JavaScript console, on iPad change the orientation)
remove the List Panel from the Panel's docked items (panel.removeDocked(item, false))
add it again (panel.addDocked(item, 0))
The result that was expected:

After removing the docked list panel and adding it again (docked) it shows correctly.
The result that occurs instead:

Only the docked toolbar of the list panel is shown.
Screenshot or Video:

attached
Debugging already done:

the panel's height is calculated 0 in the doComponentLayout method.
Possible fix:

not provided

mbalsam
13 Oct 2011, 1:03 AM
I found a solution that seems to work. I added listeners for the resize and orientationchange events to the TabPanel where I call doComponentLayout for all Tabs.



listeners: {
resize: function (cmp) {

cmp.items.each(function (item) {

item.doComponentLayout();

});

},

orientationchange: function (cmp) {

cmp.items.each(function (item) {

item.doComponentLayout();

});

}
}


Interestingly only the orientationchange listener is called even in Chrome, i.e. the resize listener may be unnecessary.

mbalsam
23 Oct 2011, 11:14 PM
so, is this considered a bug? any feedback?

Philippe Quemener
28 Feb 2012, 7:30 AM
I can confirm that there is a bug with adding/removing toolbars, I had it in my app, too. Fortunately (at least for me) I could solve it by wrapping the whole thing in another way:

Before, my app consist of a TabPanel with a tabBar docked to the bottom. Some of the cards were lists and some of the lists were adding/removing toolbars when the cardswitch was done. If you do a resize and the switch to one of the lists with toolbars, the list disappeared and it seemed that the bottom tabBar "jumped" to the top.

I solved it by wrapping the lists in panels and called the addDocked/removeDocked methods on the panel not on the TabPanel.

But I think this is a Sencha Touch bug and I hope this will be fixed.