Блог

Предположим, у меня есть следующий фрагмент кода:

 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)

Для достижения этой цели можно использовать функцию свертывания. Создайте заполнитель, который заменяет стандартный заголовок:

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

Настройте северную область как сворачиваемую и используйте заполнитель выше в качестве замены свернутого заголовка:

 ...
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 беспокоиться о макете и сохранить функциональность свертывания.

создайте панель, которая устанавливает ее высоту в 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);
                }
            }
        }
    });