Sencha Touch: Buttons - sencha-touch

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