PDA

View Full Version : showing/hiding a toolbar and reclaiming that space



OliverD
20 Jul 2010, 7:10 AM
I've set up a panel with a toolbar and a carousel. What I would like to do is have the toolbar appear/disappear when the screen is tapped. Here's what I have so far:



panel = new Ext.Panel({
id: 'myPanel',
fullscreen: true,
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
flex: 1
},
dockedItems: toolbar,
items: [carousel],
listeners: {

render: function(c) {
c.body.on('tap', function(e, t)
{

if (toolbar.isVisible()) {
toolbar.show();
} else {
toolbar.hide();
}
}, c);
}

}
});

First off, for some inexplicable reason, isVisible() is behaving more like isInvisible(), but regardless, it works.

Now my question is, is it possible to have the carousel resize when the toolbar is hidden so that it takes up the entire screen, and then the reverse when the toolbar is shown?

evant
20 Jul 2010, 7:20 AM
Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function(){
var toolbar = new Ext.Toolbar({
dock: 'top',
items: {
text: 'Foo'
}
});
panel = new Ext.Panel({
id: 'myPanel',
fullscreen: true,
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
flex: 1
},
dockedItems: toolbar,
html: 'woo',
listeners: {
render: function(c){
c.body.on('tap', function(e, t){
if (toolbar.isVisible()) {
toolbar.show();
} else {
toolbar.hide();
}
c.doComponentLayout();
}, c);
}

}
});
}
});


Not sure what you mean about isVisible(), works fine here.

OliverD
20 Jul 2010, 7:49 AM
Perfect, thank you!

Regarding isVisible(), notice I'm showing the toolbar if it's visible, and hiding it if it's not. Seems backwards to me but maybe I'm missing something.

jep
23 May 2011, 1:33 PM
Evant - has something changed since you posted this that breaks it? For me, this does nothing when I click on it on the ipad or in chrome. Also, when I just run it and chrome and simply type in the following on the command line (after making toolbar global instead of a local var):

toolbar.hide();
panel.doComponentLayout();

The toolbar hides but the panel doesn't resize to take up the whole screen now.

jep
7 Jul 2011, 7:44 PM
Still a problem. Evant?

sandeep45
7 Sep 2011, 7:51 AM
Evant - has something changed since you posted this that breaks it? For me, this does nothing when I click on it on the ipad or in chrome. Also, when I just run it and chrome and simply type in the following on the command line (after making toolbar global instead of a local var):

toolbar.hide();
panel.doComponentLayout();

The toolbar hides but the panel doesn't resize to take up the whole screen now.

try this:


var panel = Ext.getCmp("IdOfYourPanelWithToolbar");
panel.dockedItems.items[0].hide();
panel.doComponentLayout();

jep
20 Sep 2011, 8:04 AM
try this:


var panel = Ext.getCmp("IdOfYourPanelWithToolbar");
panel.dockedItems.items[0].hide();
panel.doComponentLayout();


That didn't work. Did you try it and it work for you?

First off, using panel=Ext.getCmp("IdOfYourPanelWithToolbar"), panel.dockedItems.length == 0. But even if you replace that with the original panel and call hide on it and call doComponentLayout() on the panel from Ext.getCmp, it still has the same problem I described about not reclaiming the space.

I think I've come up with a workaround, though:
http://www.sencha.com/forum/showthread.php?147839-A-kludge-for-showing-hiding-docked-items