CODEWITHSUNDEEP
popupsencha-touchoverlay
headkit
headkit

Reputation: 3327

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?

Upvotes: 5

Views: 3430

Answers (3)

Taiko
Taiko

Reputation: 1329

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

Upvotes: 0

Daantje
Daantje

Reputation: 2486

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!

Upvotes: 4

geekay
geekay

Reputation: 1673

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.

Upvotes: 7

Related Questions