1

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

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

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

4

1 回答 1

2

您可以向 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
   }
});
于 2013-08-09T16:35:50.183 回答