javascript - ExtJs边框布局点击时隐藏所有区域

Question

您好，我是 ExtJs 的新手，正在开发一个带有边框布局的项目。我想创建一个事件，以便当单击中心区域或接收焦点时，所有其他区域都会折叠。我必须创建什么类型的监听器以及将其放置在哪里？

Answer 1

您可以向中心区域添加事件监听器。您正在寻找的事件是“焦点”。

有多种方法可以获取对边框布局区域的引用。我在下面列出了一项。获得引用后，您可以调用其折叠方法。

xtype: 'container',
itemId: 'mycontainer',  
layout: {
    type: 'border' 
},
items: [{
    xtype: 'panel',
    title: 'My Center Panel',
    region: 'center',
    listeners:{
        focus: function( pan, event, eOpts ){
            var container = pan.up('#mycontainer');
            container.down('panel[region=north]').collapse();
            container.down('panel[region=east]').collapse();
        }
    }
},{
    xtype: 'panel',
    title: 'My North Panel',
    region: 'north'
},{
    xtype: 'panel',
    title: 'My East Panel',
    region: 'east'     
}]