Sencha touch 中类似 iPad 的弹出窗口

Posted 2023-02-26

【中文标题】Sencha touch 中类似 iPad 的弹出窗口

【英文标题】：iPad-like pop-over in Sencha touch

【发布时间】：2011-04-15 14:27:06

【问题描述】：

我想在 Sencha touch 中创建一个类似 iPad 的带有登录表单的弹出窗口。我该怎么做？

【问题讨论】：

我能够显示弹出框。但是您是否碰巧在点击按钮时将其关闭？因为通过设置hideOnMaskTap: true 我可以在后台点击实现。我不知道点击按钮。

就像我猜的一样简单 gkPopover.hide(); 在任何按钮处理程序中添加它，这样你就可以在点击按钮时关闭弹出框。

【参考方案1】：

你可以尝试让一个普通的 Ext.Panel 看起来像一个弹出框

var gkpopover = new Ext.Panel(
id :'gkpopoverpanel',
floating:true,
modal:true,
width:'100px',
height:'100px',                                             );

注意：不要忘记设置高度和宽度。

并显示

gkpopover.show('pop');

希望这是有道理的。

【讨论】：

您也可以添加centered: true 以使弹出框保持在屏幕中心。

【参考方案2】：

在 sencha touch 2 上，浮动已贬值。我已将@geekay 代码修改为；

        //show info popover?
    var popoverpanel = new Ext.Panel(
        modal:true,
        left:'10%',
        top:'10%',
        width:'80%',
        height:'80%',
        hideOnMaskTap: true,
        html:data.info
    );
    Ext.Viewport.add(popoverpanel);
    popoverpanel.show('pop');

功劳归他所有！

【参考方案3】：

作为this post points out，煎茶有你所需要的。

试试这个：

new Ext.Panel(
fullscreen : true,
items      : [
    
        xtype  : 'toolbar',
        docked : 'top',
        items  : [
            
                text    : 'Open',
                handler : function (button) 
                    var panel = new Ext.Panel(
                        height : 200,
                        width  : 200,
                        html   : 'Hello'
                    );

                    panel.showBy(button, 'tr-bc?');
                
            
        ]
    
]);