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中的overlay类似的东西。

因为你要弹出窗口，所以你应该让这个面板成为浮动的。

下面是它们的工作原理：

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