PDA

View Full Version : hide/show/doComponentLayout broken



jep
23 May 2011, 2:15 PM
I've seen this posted several times, sometimes with Sencha staff saying "is this a bug? has this been logged?" So I'm logging it. I THINK I'm doing everything right, according to old posts on the subject:



<html>
<head>
<title>test</title>

<link rel="stylesheet" href="../sencha/resources/css/sencha-touch.css" type="text/css">
<script type="text/javascript" src="../sencha/sencha-touch-debug.js"></script>

<script type="text/javascript">
Ext.setup({
onReady: function() {
leftPnl = new Ext.Panel({
dockedItems:{
xtype:'toolbar', title:'Left', dock:'top',
items:{
xtype:'button', text:'Hide Right',
handler:function() {
rightPnl.hide();
mainPnl.doLayout(); // just for kicks.
mainPnl.doComponentLayout()
}
}
}
});

rightPnl = new Ext.Panel({
dockedItems:{
xtype:'toolbar', title:'Right', dock:'top',
items:{
xtype:'button', text:'Hide Left',
handler:function() {
leftPnl.hide();
mainPnl.doLayout(); // just for kicks.
mainPnl.doComponentLayout();
}
}
}
});

mainPnl = new Ext.Panel({
layout:{type:'hbox', align:'stretch'},
fullscreen:true,
items:[leftPnl, rightPnl],
defaults:{flex:1, style:{border:'1px solid black'}}
});
}
});
</script>
</head>
<body></body>
</html>


What should happen is that when you click on the button for one of the panels, the other should expand to take up the full screen width. It doesn't. It just stays like it was.

This is on sencha 1.1.0 on Chrome 11.0.696.68 and on the iPad.

jep
9 Jun 2011, 6:17 PM
And here's the workaround I'm using to manually make the layout update on hide/show.



<html>
<head>
<title>test</title>

<link rel="stylesheet" href="../sencha-svn/2011-06-07/resources/css/sencha-touch.css" type="text/css">
<script type="text/javascript" src="../sencha-svn/2011-06-07/sencha-touch-debug.js"></script>

<script type="text/javascript">

Ext.setup({
onReady: function() {
var leftPnl = new Ext.Panel({
flex:0,
hidden:true,
style:{backgroundColor:'#A0FFFF'},
html:'Left panel'
});

var rightPnl = new Ext.Panel({
flex:1,
style:{backgroundColor:'#FFA0FF'},
html:'Right panel'
});

function buttonClick() {
if (leftPnl.isVisible()) {
leftPnl.flex = 0;
mainPnl.doLayout();
leftPnl.hide();
}
else {
leftPnl.flex = 3;
mainPnl.doLayout();
leftPnl.show();
}
}

var mainPnl = new Ext.Panel({
layout:{type:'hbox', align:'stretch'},
fullscreen: true,
items:[leftPnl, rightPnl],
dockedItems:{
xtype:'toolbar',
dock:'top',
items:{xtype:'button', text:'Click me', handler:buttonClick}
}
});
}
});

</script>

</head>
<body></body>
</html>


The downside is that I can't the hide/show to animate. If anyone knows of a way to do that, please post something here (http://www.sencha.com/forum/showthread.php?136182-how-to-make-this-flex-layout-animate-on-show-hide).