PDA

View Full Version : Back Button event



allisterf
9 Oct 2011, 6:19 AM
I'm really stuck to find the right way to accomplish this - hope someone can help?

I'm capturing the android back button to navigate to somewhere in my app rather than letting it close the app (using phonegap api).

The code is simple enough
-------------
document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
document.addEventListener("backbutton", onBackKeyDown, false);
}
function onBackKeyDown() {
Ext.getCmp('aboutcards').setActiveItem('card-0');
}
-------------
The shape of my app is:
----------------------
/*WHATS ON-----------------------------------------------------------------*/
var aboutpanel = new Ext.Panel({
title: 'Whats On',
layout: 'card',
id: 'aboutcards',
cardSwitchAnimation: {type: 'fade', duration:500},
iconCls: 'calendar',
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
height: '70px',
ui: 'omred',
title: '<div align="center"><table><tr><td><img src="images/headerwhat.png"/></td></tr></table></div>',

}],

items: [{
id: 'card-0',
items: [
{xtype: 'button',
cls: 'whatsOn',
handler: function(){
//Navigate to firstpanel
Ext.getCmp('aboutcards').setActiveItem('card-1'); }
},
{xtype: 'button',
cls: 'nightOut',
handler: function(){
//Navigate to second panel
Ext.getCmp('aboutcards').setActiveItem('card-2');}
},
{xtype: 'button',
cls: 'eventCal',
handler: function(){
//Navigate to second panel
Ext.getCmp('aboutcards').setActiveItem('card-3');}
}
]},
{
html: 'Card 1',
id: 'card-1',
cls: 'card card1',
items: [newsListings2[0]]
},
{
html: 'Card 1',
id: 'card-2',
cls: 'card card2',
items: [newsListings[0]]
},
{
html: 'Card #3',
id: 'card-3',
cls: 'card card3',
items: [newsListings[1]]
}],
activeItem: 0

});


/*NEWS----------------------------------------------------------------*/
var newspanel = new Ext.Panel({
title: 'News',
layout: 'card',
id: 'newscards',
cardSwitchAnimation: {type: 'fade', duration:500},
iconCls: 'rss_black2',
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
height: '70px',
ui: 'omred',
title: '<div align="center"><table><tr><td><img src="images/headernews.png"/></td></tr></table></div>',

}],

items: [{
id: 'newscard-0',
items: [
{xtype: 'button',
cls: 'localNews',
handler: function(){
//Navigate to firstpanel
Ext.getCmp('newscards').setActiveItem('newscard-1');}
},
{xtype: 'button',
cls: 'regionalNews',
handler: function(){
//Navigate to second panel
Ext.getCmp('newscards').setActiveItem('newscard-2');}
},
{xtype: 'button',
cls: 'townCouncil',
handler: function(){
//Navigate to second panel
Ext.getCmp('newscards').setActiveItem('newscard-3');}
},
{xtype: 'button',
cls: 'chamber',
handler: function(){
//Navigate to second panel
Ext.getCmp('newscards').setActiveItem('newscard-4');}
}
]},
{
html: 'Card 1',
id: 'newscard-1',
cls: 'card card4',
items: [newsListings2[1]]
},
{
html: 'Card 1',
id: 'newscard-2',
cls: 'card card5',
items: [newsListings2[2]]
},
{
html: 'Card 1',
id: 'newscard-3',
cls: 'card card6',
items: [newsListings2[3]]
},
{
html: 'Card 1',
id: 'newscard-4',
cls: 'card card7',
items: [newsListings2[4]]
}],
activeItem: 0
});




But, because of the scope of the various instances of ext.panel that I have as card layouts, I need to have a function that covers a backbutton call for each panel…kind of like:
--------------------

function onBackKeyDown() {
Ext.getCmp('aboutcards').setActiveItem('card-0');
Ext.getCmp('newscards').setActiveItem('newscard-0');
}
------------------

It would be nice if it were as simple as making a list in the function like that and, sometimes, the above works - but more than often it crashes the app and freezes.

Is there a better approach to listening for the backbutton event and then setting it programatically for the scope of that panel?

Thanks for your help
Allister

Sameer Khan
23 Jan 2012, 10:41 PM
Hi, I am also looking for the same functionality...When click back button of device, simply application terminating..but it should not happen like this..If i write PhoneGap event it is working globally for all the panels..It's a wrong thing...so here when we click on back buttion of device it should bring previous panel...

How to do it ?
If any body have solution please share with us ?