sencha-touch - sencha touch 2 中的模态视图

Question

我试图在我的应用程序中将视图显示为“模态”。主应用程序是一个选项卡面板，当用户执行某个操作时，我想在此选项卡面板上弹出一个视图。我知道在本机 iOS 上，您可以通过将视图作为模式推送来做到这一点，但我如何在 Sencha 中做到这一点？

有任何想法吗？

Answer 1

你可以这样做：

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了解不同类型的覆盖物。