2013-03-31 4 views
2

내 애플리케이션에서보기를 "모달"로 표시하려고합니다. 주요 응용 프로그램은 탭 패널이며 사용자가 특정 작업을 수행 할 때이 탭 패널의보기 ontop을 팝업으로 표시하려고합니다. 네이티브 iOS에서보기를 모달로 푸시하여이 작업을 수행 할 수 있지만 Sencha에서 어떻게 수행 할 수 있습니까?sencha touch 2의 모달보기

아이디어가 있으십니까?

답변

7

이 작업을 수행 할 수 있습니다

Ext.define('MyApp.controller.MyController4', { 
    extend: 'Ext.app.Controller', 

    config: { 
     control: { 
      "button#mybutton": { 
       tap: 'onMybuttonTap' 
      } 
     } 
    }, 

    onMybuttonTap: function(button, e, options) { 
     Ext.Viewport.add({xtype:'modalpanel'}); 
    } 
}); 

조회수 :

Ext.define('MyApp.view.ModaPanel', { 
extend: 'Ext.Panel', 
alias: 'widget.modalpanel', 

config: { 
    centered: true, 
    height: 300, 
    html: 'Cool Story Bro....', 
    itemId: 'modalPanel', 
    width: 300, 
    hideOnMaskTap: true, 
    modal: true, 
    scrollable: true, 
    hideAnimation: { 
     type: 'popOut', 
     duration: 200, 
     easing: 'ease-out' 
    }, 
    showAnimation: { 
     type: 'popIn', 
     duration: 200, 
     easing: 'ease-out' 
    }, 
    items: [ 
     { 
      xtype: 'toolbar', 
      docked: 'top', 
      title: 'Blah Blah' 
     } 
    ] 
} 

}); 

Ext.define('MyApp.view.MyTabPanel', { 
extend: 'Ext.tab.Panel', 

config: { 
    items: [ 
     { 
      xtype: 'container', 
      title: 'Tab 1', 
      items: [ 
       { 
        xtype: 'button', 
        itemId: 'mybutton', 
        text: 'MyButton10' 
       } 
      ] 
     }, 
     { 
      xtype: 'container', 
      title: 'Tab 2' 
     }, 
     { 
      xtype: 'container', 
      title: 'Tab 3' 
     } 
    ] 
} 

}); 

편집 :이 정확히 당신이 원하는하지 않은 경우 당신은 아마 actionsheet를 찾고 있습니다 . 다양한 유형의 오버레이에 대해서는 Sencha Touch Kitchensink을 참조하십시오.

+0

감사합니다. 도움이됩니다. 하지만 모달을 맨 아래에서 움직이는 방법은 없나요? 지금은 그냥 화면에 나타납니다. – Obaid

+0

하단에서 무엇을 의미합니까? 아래쪽에서 애니메이션을 슬라이드 업한다는 의미입니까? – cclerville

+0

예, 아래쪽에서 애니메이션을 위로 이동합니다. – Obaid

관련 문제