PDA

View Full Version : .hide/.doLayout/.doComponentLayout issue



jeffzamo
17 Jan 2011, 12:59 PM
Hi Everyone,

Like others, I am having trouble showing/hiding a tabbar docked to a panel. I created a demo app that uses a button to toggle the tabbar docked to the bottom of the panel. The bar does show and hide nicely but the layout is not redrawn. After reviewing forum posts it seems some people are getting this to work. Can someone point out any issues in the code below?



// using sencha touch 1.0.1a
Ext.setup({
tabletStartupScreen: 'images/startup.png',
phoneStartupScreen: 'images/startup.png',
icon: 'images/icon.png',
glossOnIcon: false,
onReady: function () {

var showMenu = true;

var toggleMenu = function() {
if (showMenu)
appPanel.tabBar.hide({type: 'slide', direction: 'up'});
else
appPanel.tabBar.show({type: 'slide', direction: 'up'});

showMenu = !showMenu;

appPanel.doLayout();
appPanel.doComponentLayout();

//setTimeout(function(){ panel.doLayout(); }, 300); // doesnt seem to help either
//setTimeout(function(){ panel.doComponentLayout(); }, 300);
}

var appPanel = new Ext.TabPanel({

fullscreen: true,
id: 'appPanel',
dockedItems:[
{
xtype:'toolbar',
items:[
{
text: 'toggle menu',
handler: toggleMenu
}
]
}
],

// manual lookup panels
items:
[{
iconCls: 'bookmarks',
title: 'Book',
name: 'book',
layout: 'card',

items:
[{
xtype: 'carousel',
items: [
{
html: '<p>1</p>',
cls: 'card card1'
},
{
html: '<p>2</p>',
cls: 'card card2'
},
{
html: '<p>3</p>',
cls: 'card card3'
},
{
html: '<p>4</p>',
cls: 'card card4'
},
{
html: '<p>5</p>',
cls: 'card card5'
}
]
}
],
dockedItems: [{
cls: 'card',
html: 'demo'
}]
},
{
iconCls: 'favorites',
title: 'Saved',
html: 'Pressed Favorites'
}
],

tabBar: {
id: 'appToolbar',
dock: 'bottom',
scroll: {
direction: 'horizontal',
}
}
});
}
});

jep
23 May 2011, 1:52 PM
I've ran into this same problem. Which is weird, because I've went many revs back in the library and it seems to always be a problem. I have no idea how others are getting it to work.

FWIW, here's my failing example:


<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.doComponentLayout()
}
}
}
});

rightPnl = new Ext.Panel({
dockedItems:{
xtype:'toolbar', title:'Right', dock:'top',
items:{
xtype:'button', text:'Hide Left',
handler:function() {
leftPnl.hide();
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>


Edit: I've also sprinkled mainPnl.doLayout() in there before mainPnl.doComponentLayout(). Does no good.