Автоматическое скрытие области просмотра в Extjs - PullRequest
Новая
       31

Автоматическое скрытие области просмотра в Extjs

4 голосов
/ 18 октября 2011

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

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)

Ответы [ 2 ]

5 голосов
/ 19 октября 2011

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

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

2 голосов
/ 19 октября 2011

создать панель, которая устанавливает ее высоту в 1 пиксель, когда мышь не находится на нем, и устанавливает ее высоту в 300 пикселей, когда мышь находится на нем.

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