iPad-like pop-over in Sencha touch

问题

I want to create an iPad-like pop-over with a login form in Sencha touch. How can I do this?

回答1:

You may try making a normal Ext.Panel to look like a popover

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

Note: Never forget to set height and width.

and to Show

gkpopover.show('pop');

hope this makes sense.

回答2:

On sencha touch 2, floating is depreciated. I've modified @geekay code to;

        //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');

Credits go to him!

回答3:

As this post points out, sencha have very exactly what you need.

Try this :

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?');
                }
            }
        ]
    }
]});

来源：https://stackoverflow.com/questions/5678217/ipad-like-pop-over-in-sencha-touch