Question

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

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个面板。然而，我想从这个控制器中获得的只是通过单击创建一个面板并隐藏可能已经显示在三个面板中的任何其他面板（淡出）。

有没有办法实现这个目标？谢谢你的阅读！

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

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

1 个答案: