PDA

View Full Version : hideable navigation pane?



omulriain
18 Sep 2010, 1:44 PM
Has anyone done anything similar to kitchen sink but implemented a sliding or other mechanism for minimizing the navigation pane (the one docked on the left loaded with sink.StructureStore)? Code would be appreciated.

omulriain
18 Sep 2010, 3:11 PM
I can hide the navigation panel but I am not getting how to shift the content. I have a button declared similar to the back button.

here is my function.

onHideNavButtonTap: function() {
if (this.navigationPanel.hidden == false)
{
this.hideButton.setText( 'show' );
this.navigationPanel.hide();
this.items.unshift(this);
}else{
this.hideButton.setText( 'hide' );
this.navigationPanel.show();
this.doComponentLayout();
}
},

Any ideas?

evant
19 Sep 2010, 7:46 PM
The kitchen sink example already does this when the orientation changes. Have a look at that code.

savelee
20 Sep 2010, 12:23 AM
I'm working on the same.
This does the trick:


layoutOrientation: function(strOrientation, intWidth, intHeight){
/*
* Default framework function to determine on which orientation you are viewing,
* and correct the layout.
* @param strOrientation - string
* @param intWidth - int screen width
* @param intHeight - int screen height
*/

if (!Ext.is.Phone) {
if (strOrientation == 'portrait') {
this.extNavPanel.hide(false);
this.removeDocked(this.extNavPanel, false);
if (this.extNavPanel.rendered) {
this.extNavPanel.el.appendTo(document.body);
}
this.extNavPanel.setFloating(true);
this.extNavPanel.setHeight(400);
this.extNavButton.show(false);
} else {
this.extNavPanel.setFloating(false);
this.extNavPanel.show(false);
this.extNavButton.hide(false);
this.insertDocked(0, this.extNavPanel);
}

this.extToolbar.doComponentLayout();
}

Ext.ux.ipadUI.superclass.layoutOrientation.call(this, strOrientation, intWidth, intHeight);
}