ボタンクリック時の表示パネル

Question

私は2つのパネルを作成しました。ボタンをクリックするとPanel1の下にpanel2が表示されます。これを実現するためにボタンに追加する必要があるリスナーの種類は何ですか？

ここ

var panel1 = Ext.create('Ext.form. Panel', { 

    layout: { 
     type: 'vbox', 
     align: 'stretch' 
    }, 
    items: [{ 
     html: 'hello' 
    }, 
    { 
     xtype: 'button', 
     text: 'click me' 
    }] 
}); 

var panel2 = Ext.create('Ext.form. Panel', { 

    layout: { 
     type: 'vbox', 
     align: 'stretch' 
    }, 
    items: [{ 
     html: 'world'}] 
}); 

を次のようにコード例がある私は、htmlの「世界」はボタンのクリック後に表示されるようにしたいです。それを行う方法はありますか？

Answer 1

確かに、あなたが探しているのは、ボタンのクリックを処理するボタン設定handlerです。ボタンのイベントclickまたはtapを使用することもできます（ClassicまたはModernフレームワークの場合）。この関数では、ボタンが（親を取得する）FormPanelを取得し、新しい項目を追加できます。ここで

Ext.define('MyApp.view.MyFormPanel', { 
    extend: 'Ext.form.Panel', 
    alias: 'widget.myformpanel', 

    requires: [ 
     'Ext.Button' 
    ], 

    layout: 'vbox', 
    title: 'My Form', 

    items: [{ 
     xtype: 'button', 
     handler: function (button, e) { 
      var panel2 = Ext.create('Ext.form.Panel', { 
       layout: { 
        type: 'vbox', 
        align: 'stretch' 
       }, 
       items: [{ 
        html: 'world' 
       }] 
      }) 

      button.getParent().add(panel2); 
     }, 
     text: 'MyButton' 
    }, { 
     html: 'something' 
    }] 

}); 


Ext.application({ 
    views: [ 
     'MyFormPanel' 
    ], 
    name: 'MyApp', 

    launch: function() { 
     Ext.create('MyApp.view.MyFormPanel', { 
      fullscreen: true 
     }); 
    } 

}); 

は実施例である：https://fiddle.sencha.com/#view/editor&fiddle/1sqr

読書もう一度あなたの質問の谷、それはあなたが、その場合にはあなたに両方のフォームを入れた容器か何かが必要になり、自身怒鳴るフォームについて尋ねているようです。だけではなく、button.getParent()を呼び出すあなたがcnt[0].add(panel2);を行うだろうか、Ext.first('#myId').add(panel2)

を使用することができますので、あなたがオブジェクトのあなたの配列を返しますvar cnt = Ext.ComponentQuery.query('#myId')を呼ぶだろうよりも、そのidともあることを忘れないでください

あなたはこのコンテナを設定することができますがExtJSフレームワークでこれを達成する方法はいろいろありますが、これは単なる1つの方法です。