Autohide a viewport's region in Extjs

Question

Lets suppose i have the following code snippet:

Ext.create('Ext.container.Viewport', {
layout: 'border',
renderTo: Ext.getBody(),
items: [{
    region: 'north',
    html: '<h1 class="x-panel-header">Page Title</h1>',
    autoHeight: true,
    border: false,
    margins: '0 0 5 0'
}, {
    region: 'west',
    collapsible: true,
    title: 'Navigation',
    width: 150
    // could use a TreePanel or AccordionLayout for navigational items
}, {
    region: 'south',
    title: 'South Panel',
    collapsible: true,
    html: 'Information goes here',
    split: true,
    height: 100,
    minHeight: 100
}, {
    region: 'east',
    title: 'East Panel',
    collapsible: true,
    split: true,
    width: 150
}, {
    region: 'center',
    xtype: 'tabpanel', // TabPanel itself has no title
    activeTab: 0,      // First tab active by default
    items: {
        title: 'Default Tab',
        html: 'The first tab\'s content. Others may be added dynamically'
    }
}]
});

What i want to do is to have the north toolbar to be hidden automatically when the mouse is moved away from the north region and unhidden when the mouse is hovered on north region(exactly like autohide in windows start menu)

score 5 · Accepted Answer · answered Oct 19 '11 at 06:20

You could use the collapse functionality to achieve this. Create a placeholder that replaces the standard Header:

var placeHolder = Ext.create('Ext.panel.Panel', {
  height: 5,
  listeners: {
    mouseover : {
      element : 'el',
      fn : function(){
        //Expand the north region on mouseover
        Ext.getCmp('region-north').expand();
      }
    }
  }
});

Configure the north region to be collapsible and use the placeholder above as Collapsed-header-replacement:

...
items: [{
  region: 'north',
  html: '<h1 class="x-panel-header">Page Title</h1>',
  autoHeight: true,
  border: false,
  id: 'region-north',
  margins: '0 0 5 0',
  collapsible: true,
  collapsed: true,
  placeholder: placeHolder,
  preventHeader: true,
  listeners: {
    mouseleave: {
      element: 'el',
      fn: function() {
        Ext.getCmp('region-north').collapse();
      }
    }
  }
},
...

This way you can let Ext worry about the layout and keep the collapse functionality.

score 2 · Answer 2 · answered Oct 18 '11 at 20:07

2

create a panel that sets its height to 1px when the mouse is not on it, and sets its height to 300px when the mouse is on it.

    Ext.create('Ext.panel.Panel',{
        renderTo : 'summary-div',
        height : 300, 
        listeners : {
            mouseover : {
                element : 'el',
                fn : function(){
                    this.setHeight(300);
                }
            },
            mouseleave : {
                element : 'el',
                fn : function(){
                    this.setHeight(1);
                }
            }
        }
    });

answered Oct 18 '11 at 20:07

Chao

1,058
7
12

will your solution set the height of the parent panel which in my case is viewport`s north region?if not,then my toolbar which is located in north will be hidden but the region will not be hidden. – Mehdi Fanai Oct 18 '11 at 20:20
my solution is refering to the region itself so append the listerners:{} on that north region which is a panel – Chao Oct 18 '11 at 23:51

Autohide a viewport's region in Extjs

2 Answers2