Sencha Touch：按钮答案

【问题标题】：Sencha Touch: ButtonsSencha Touch：按钮
【发布时间】：2012-05-05 17:41:41
【问题描述】：

我正在尝试使用 Sencha Touch 2 在弹出窗口中实现按钮。按钮如何工作？我想要一个按钮来关闭窗口，另一个按钮来调用 doSomething 函数。

function foo(){
    Ext.Viewport.add({
        xtype: 'panel',
        scrollable: true,
        centered: true,
        width: 400,
        height: 300,
        items:[
            {
                docked: 'bottom',
                xtype: 'titlebar',
                items:[
                    {
                        xtype: 'button',
                        ui: 'normal',
                        text: 'Do Something',
                        go: 'testsecond'
                    },  
                    {
                        xtype: 'button',
                        ui: 'normal',
                        text: 'Close',
                        go: 'testsecond',               
                    },                  
                ]
            },
        ]
    });//Ext.Viewport.add
}

function doSomething() {
    console.log('hi');
}

【问题讨论】：

标签： sencha-touch sencha-touch-2

【解决方案1】：

只需向按钮添加一个处理程序，例如

{
    xtype: 'button',
    ui: 'normal',
    text: 'Close',
    go: 'testsecond',
    handler:doSomething               
}

或

{
    xtype: 'button',
    ui: 'normal',
    text: 'Close',
    go: 'testsecond',
    handler:function(){
        //do something.
    }               
}

【讨论】：

【解决方案2】：

我认为，您需要类似于 Sencha Touch 中的叠加层。

由于您要弹出窗口，因此您应该将此面板设置为浮动面板。

它们的工作原理如下：

Ext.Loader.setConfig({
    enabled: true
});

Ext.application({
    name: 'FloatingPanelWindow',

    launch: function() {
        overlay = Ext.Viewport.add({
            xtype: 'panel',
            scrollable: true,
            modal: true,                  // to make it floating
            hideOnMaskTap: true,          // close the window by clicking on mask outside popup window
            centered: true,
            width: 400,
            height: 300,
            items:[
                {
                    docked: 'bottom',
                    xtype: 'titlebar',
                    items:[
                        {
                            xtype: 'button',
                            ui: 'normal',
                            text: 'Do Something',
                            listeners : {
                                tap : function() {
                                    overlay.hide(); // to close this popup window.
                                    Ext.Msg.alert("Clicked on DoSomething"); //callDoSomethingMethod(); // perform your task here.                               
                                }
                            }
                        },  
                        {
                            xtype: 'button',
                            ui: 'normal',
                            text: 'Close',
                            listeners : {
                                tap : function() {
                                    overlay.hide();
                                }
                            }              
                        },                  
                    ]
                        },
                    ]
     });//Ext.Viewport.add
    }
 });

这是您将获得的示例输出。

【讨论】：

【解决方案3】：

这里很简单

                {
                    xtype: 'button',
                    ui: 'normal',
                    text: 'Do Something',
                    go: 'testsecond',
                    handler:function(){
                    //do something.
                    }
                },  
                {
                    xtype: 'button',
                    ui: 'normal',
                    text: 'Close',
                    go: 'testsecond',
                    handler:function(){
                      //popup_window.hide();
                    }               
                }

【讨论】：