PDA

View Full Version : Tip: when changing a component to floating, be sure to hide it first



jep
5 Jan 2011, 10:16 AM
Just throwing this out there in case anyone else finds it helpful. I was fighting for a while trying to figure out why my code to set a non-floating panel to a floating one caused it to be weirdly offset. This might even ought to be classified as a bug. Anyway, before you remove it from the parent, you need make sure you hide it. Example:



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

<script type="text/javascript">

Ext.setup({
onReady: function() {
float = new Ext.Panel({
style:'background-color: #C0C0FF',
html:'float'
});

mainPanel = new Ext.Panel({
layout:'fit',
fullscreen:true,
items:[float],
dockedItems:{xtype:'toolbar', dock:'bottom', items:[
{xtype:'button', text:'float', handler:function() { makefloat(float) } }
]}
});

function makefloat(cmp) {
cmp.hide(); // comment this out and it screws up
mainPanel.remove(cmp, false);
cmp.setPosition(10, 10);
cmp.setFloating(true);
cmp.hideOnMaskTap = false;
cmp.show();
cmp.setHeight(100);
cmp.setWidth(100);
}
}
});

</script>
</head>

<body></body>
</html>


If you don't do it that way (and to some degree, in that order), it doesn't work right.

Of course, maybe there's some obscure method I should be using instead and I'm just doing it all wrong anyway. :D

Gary Pickrell
18 Jan 2011, 4:31 AM
Thank you for posting this. I've been struggling to get floating to work. Your example is the first case I've seen where it does. Now I'm running amuck with floats =)