PDA

View Full Version : panel.removeAll does not cleanup the DOM



zzerk
26 Oct 2011, 12:40 PM
Code:

Sencha Touch version tested:

1.0.3
1.2.0-alpha-20110920


only default ext-all.css
Platform tested against:

iOS 5.0
Android 2.3
MacOS + Safari 5.1.1
Description:

I am trying to make a component that changes its layout depending on device orientation (if the device is in portrait mode, display some information using a vbox layout, if the device is in landcape, use a hbox layout). As it does not seem possible to dynamically change the layout of a panel, I do construct two panels, one for each orientation, and display the appropriate one depending on current device implementation.Some test code is shown below but leads to some garbaged screen. Console logs tend to confirm that switching is done correctly (panel items count is correct) however some elements are visible in the DOM while they are not supposed to be.Furthermore, size of component does not seem to propagate correctly (this may be a bug in my code as I am not yet very experienced with Sencha Touch and don't fully understand the difference between doLayout and doComponentLayout and what they actually do).
Test Case:
var rootPanel, landscapePanel, portraitPanel;


Ext.setup({
onReady: function() {


var red = {
style: "background-color: #B22222; color:white;",
title: "Red",
html: "Red"
};


var amber = {
style: "background-color: #FFBF00; color:white;",
title: "Amber",
html: "Amber"
};


var green = {
style: "background-color: #3B7E00; color:white;",
title: "Green",
html: "Green"
};
landscapePanel = new Ext.Panel({
layout: {
type: 'hbox',
align: 'stretch',
pack: 'start' // try start [default], center or end.
},
defaults: {flex: 1}, // alternatively, apply flex to each inner item
items: [],
dockedItems: []
});
portraitPanel = new Ext.Panel({
layout: {
type: 'vbox',
align: 'stretch',
pack: 'start' // try start [default], center or end.
},
defaults: {flex: 1}, // alternatively, apply flex to each inner item
items: [red,amber,green],
dockedItems: []
});
rootPanel = new Ext.Panel({
fullscreen: true,
layout: 'fit',
monitorOrientation:true,
items: [portraitPanel],
dockedItems: [],
updateOrientation: function(orientation,w,h)
{
console.log("== updateOrientation:"+orientation+" ==");
if(orientation==="portrait" && portraitPanel.items.length==0) {
console.log(portraitPanel);
landscapePanel.removeAll(false);
rootPanel.removeAll(false);
portraitPanel.add([red,amber,green]);
rootPanel.add(portraitPanel);
rootPanel.doLayout();
portraitPanel.doComponentLayout();
}
else if (orientation==="landscape" && landscapePanel.items.length==0)
{
console.log(landscapePanel);
portraitPanel.removeAll(false);
rootPanel.removeAll(false);
landscapePanel.add([red,amber,green]);
rootPanel.add(landscapePanel);
rootPanel.doLayout();
landscapePanel.doComponentLayout();
}
},
listeners: {
beforeorientationchange: function(me,orient,n_w,n_h) {
console.log("== beforeorientationchange ==");
me.updateOrientation(orient,n_w,n_h);
}
}
});
}
});See this URL : http://barsentrans.newlc.com/test/orientation
(http://barsentrans.newlc.com/test/orientation)
Steps to reproduce the problem:

point to the url above with your device in portrait mode
rotate the device so that display switches to landscape
do a few more orientation switch
The result that was expected:

display switches between hbox and vbox layouts and panels are correctly resized
The result that occurs instead:

some elements are not cleaned and visible in the DOM despite Ext panels do not seem to contain them anymore
child panels in the hbox and vbox are not always correctly resized
seem to work for landscape mode only after two orientation switches
Screenshot or Video:

attached (taken from safari)
Debugging already done:

none
Possible fix:

I wish I had one!