Toolbarのボタンからオーバーレイ表示

概要

Toolbarにあるボタンを表示すると、ボタン下部にオーバーレイ表示したパネルを表示させる

コード

• Toolbarコンポーネントのボタンに対して、別パネルcreateする
• 生成したコンポーネントに対して

overlay.js

  xtype: 'button',
  text: 'overlay',
  handler: function(btn, event){
      var main = btn.getParent().getParent();
      main.overlay = Ext.create('Ext.Panel', {
          html: 'panel text',
          modal: true, // true:表示したオーバーレイの背面をグレーアウトさせ操作できないようにする
          width: 300,
          height: 400,
          scrollable: true,
          top: 0,
          left: 0
      });
      // オーバーレイさせるパネルから吹き出しを表示してどのボタンから
      // 表示したのかわかりやすくする
      // btn：対象のボタン
      main.overlay.showBy(btn);

  }

サンプルコード