单击一个面板，隐藏其他面板 - Ext JS答案

【问题标题】：Click one Panel, Hide other Panels - Ext JS单击一个面板，隐藏其他面板 - Ext JS
【发布时间】：2013-08-09 15:53:07
【问题描述】：

我有三个带控制器的独立按钮。单击其中一个按钮时，将创建并显示一个面板（带有动画）。这是我的一个控制器的样子：

Ext.define('AM.controller.Prod_Select', {
    extend: 'Ext.app.Controller',
    init: function() {
        this.control({
            '#prod_select': {
                click: this.prodSelect
            }
        });
    },

    prodSelect: function() {
        var subPanel = Ext.create('Ext.panel.Panel', {
            width: 200,
            height: 160,
            html: '<center><p class="sub_panel_text "> Link <br /> Link <br /> Link </p> </center>',
            bodyStyle: 'background:#010a4d',
            border:false,
            floating: true,
            shadow: false,
            style: 'opacity: 0;',
            x: 770,
            y: 75,
            cls: 'sub_panel'
        });
        subPanel.show();
        subPanel.animate({
            duration: 1000,
            to: {
                opacity: .6,
                x: 800,
                y: 75
            }
        }); 
        console.log('Clicked Prod');
    }
});

这很好用，但目前我可以单击一个按钮 x 次，它会创建 x 数量的面板。然而，我想要从这个控制器中得到的只是通过单击创建一个面板并隐藏可能已经显示在三个面板之外的任何其他面板（淡出）。

有没有办法做到这一点？感谢阅读！

【问题讨论】：

标签： extjs hide panel show

【解决方案1】：

您可以向 subPanel 添加一个属性，以便使用 ComponentQuery 轻松选择它，然后遍历查询的结果并隐藏其他面板。

var subPanel = Ext.create('Ext.panel.Panel', {
   someCustomProperty: 'someCustomValue',
   ...    
});

var allPanels = Ext.ComponentQuery.query('panel[someCustomProperty="someCustomValue"]');

Ext.Array.each(allPanels, function(panel) {
   if (panel === subPanel) {
      //show it
   } else {
      //hide it
   }
});

【讨论】：

太棒了！非常感谢！！