sencha-touch - Sencha Touch：按钮

Question

我正在尝试使用 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');
}

Answer 1

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

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

或者

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

Answer 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
    }
 }); 

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

Answer 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();
                    }               
                }