在 Extjs 中自动隐藏视口区域

Question

假设我有以下代码片段：

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'
    }
}]
});

我想要做的是当鼠标移离北部区域时自动隐藏北部工具栏，并在鼠标悬停在北部区域时取消隐藏（就像 Windows 中的自动隐藏一样）开始菜单）

Answer 1

您可以使用折叠功能来实现此目的。创建一个占位符来替换标准标题：

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

将北部区域配置为可折叠，并将上面的占位符用作 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();
      }
    }
  }
},
...

这样您可以让 Ext 担心布局并保留折叠功能。

Answer 2

创建一个面板，当鼠标不在其上时将其高度设置为 1px，当鼠标位于其上时将其高度设置为 300px。

    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);
                }
            }
        }
    });