Auto Finish Viewport in Extjs

Question

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\ content. Others may be added dynamically' } }] }); 

What I want to do is that the toolbar to the north will be hidden automatically when the mouse is removed from the northern region and will not be hidden when the mouse is in the northern region (just like an auto show on the Windows start menu)

Answer 1

To achieve this, you can use the collapse function. 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(); } } } }); 

Set up the northern region, which should be collapsible, and use the placeholder as a replacement for the Collapsed-header:

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

That way, you can let Ext worry about the layout and keep the functions collapse.

Answer 2

create a panel that sets the height to 1px when the mouse is not on it, and sets its height to 300 pixels 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); } } } });