Sencha Touch 2でパネルをクリックしたときにオーバーレイを表示する方法

Question

Sencha Touch 2にActionSheetとPanelがあります。アイコンマップがパネルでクリックされたときにActionSheetオーバーレイを表示したいのですが、どうすればいいですか？それ？

Ext.define('app.view.takePhoto', { 
    extend: 'Ext.ActionSheet', 

    config: { 
     items: [ 
     { 
      text: 'Delete draft', 
      ui : 'decline' 
     }, 
     { 
      text: 'Save draft' 
     }, 
     { 
      text: 'Cancel', 
      ui : 'confirm' 
     } 
     ] 
    } 

}); 

Answer 1

asking.js

Panel.js

Ext.define('app.view.principalTabPanel', { 
    extend: 'Ext.tab.Panel', 

    config: { 
     ui: 'light', 
     items: [ 
      { 
       xtype: 'mappanel', 
       title: 'Map', 
       iconCls: 'locate' 
      } 
     ], 
     tabBar: { 
      docked: 'bottom', 
      ui: 'light' 
     } 
    } 

}); 

あなたはあなたの商品のtabオブジェクト内のあなたのタブにリスナーを追加することによってこれを行うことができます。

{ 
    xtype: 'mappanel', 
    title: 'Map', 
    iconCls: 'locate' 
    tab: { 
     listeners: { 
      tap: function() { 
       var sheet = Ext.create('app.view.takePhoto'); 
       sheet.show(); 
      } 
     } 
    } 
} 

リスナーの内側に、app.view.takePhotoクラスの新しいインスタンスを作成して表示します。

Answer 2

show（）をshowBy（）に変更した後、同じ問題が発生しました。この方法は、唯一のDOM要素に呼び出すことができるようなHTML IDの代わりに、コンポーネントを指定 ではなく

.showBy('settingsTab') 

のトリック

.showBy(Ext.get('ext-tab-5')); 

は思いませんでした。

これは何とか役立ちます。