在 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

您可以使用折叠功能来实现这一点。创建一个占位符来替换标准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();
      }
    }
  }
});

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