在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担心布局并保持折叠功能.