2
내 애플리케이션에서보기를 "모달"로 표시하려고합니다. 주요 응용 프로그램은 탭 패널이며 사용자가 특정 작업을 수행 할 때이 탭 패널의보기 ontop을 팝업으로 표시하려고합니다. 네이티브 iOS에서보기를 모달로 푸시하여이 작업을 수행 할 수 있지만 Sencha에서 어떻게 수행 할 수 있습니까?sencha touch 2의 모달보기
아이디어가 있으십니까?
내 애플리케이션에서보기를 "모달"로 표시하려고합니다. 주요 응용 프로그램은 탭 패널이며 사용자가 특정 작업을 수행 할 때이 탭 패널의보기 ontop을 팝업으로 표시하려고합니다. 네이티브 iOS에서보기를 모달로 푸시하여이 작업을 수행 할 수 있지만 Sencha에서 어떻게 수행 할 수 있습니까?sencha touch 2의 모달보기
아이디어가 있으십니까?
이 작업을 수행 할 수 있습니다
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을 참조하십시오.
감사합니다. 도움이됩니다. 하지만 모달을 맨 아래에서 움직이는 방법은 없나요? 지금은 그냥 화면에 나타납니다. – Obaid
하단에서 무엇을 의미합니까? 아래쪽에서 애니메이션을 슬라이드 업한다는 의미입니까? – cclerville
예, 아래쪽에서 애니메이션을 위로 이동합니다. – Obaid