1

コントローラー付きの 3 つの独立したボタンがあります。いずれかのボタンをクリックすると、パネルが作成されて表示されます (アニメーション付き)。私のコントローラーの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');
    }
});

これは問題なく動作しますが、現在、1 つのボタンを x 回クリックすると、x 個のパネルが作成されます。ただし、このコントローラーに必要なのは、クリックから単一のパネルのみを作成し、3 つのうち既に表示されている可能性のある他のパネルを (フェードアウトで) 非表示にすることです。

これを達成する方法はありますか？読んでくれてありがとう！

4

1 に答える 1

2

サブパネルにプロパティを追加して、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 に答える