Sencha Touch: Buttons

Question

I am trying to implement buttons in a pop-up window with Sencha Touch 2. How do the buttons work? I would like one button to close the window and another to call the doSomething function.

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

Just add a handler to the button like

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

or

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

Answer 2

I think, you are requiring something similar to overlay's in Sencha Touch.

Since you are going for pop-up, you should make this panel as a floating one.

Here's how they work :

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

This is the sample output you will get.

Answer 3

simple here

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