Всплывающее окно, похожее на iPad, в Sencha touch

#popup #sencha-touch #overlay

#всплывающее окно #sencha-touch #наложение

Вопрос:

Я хочу создать всплывающее окно, похожее на iPad, с формой входа в систему в Sencha touch. Как я могу это сделать?

1. Я смог показать всплывающее окно. Но случилось ли так, что вы отклонили его нажатием кнопки? Потому что, установив hideOnMaskTap: true , я могу добиться этого при нажатии в фоновом режиме. Я не мог разобраться с нажатием кнопки.

2. это было так просто, как я и предполагал gkPopover.hide(); добавьте это в любой обработчик кнопок, чтобы вы могли отменить всплывающее окно при нажатии кнопки.

Ответ №1:

Вы можете попробовать создать обычную внешнюю панель, чтобы она выглядела как всплывающее окно

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

Примечание: Никогда не забывайте устанавливать высоту и ширину.

и чтобы показать

 gkpopover.show('pop');

надеюсь, это имеет смысл.

Ответ №2:

В sencha touch 2 функция floating обесценивается. Я изменил код @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:

Как указано в этом посте, в sencha есть именно то, что вам нужно.

Попробуйте это :

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