Results 1 to 2 of 2

Thread: Back Button event

  1. #1
    Sencha User
    Join Date
    Aug 2011
    Posts
    206

    Default Back Button event

    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 panelkind 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

  2. #2
    Sencha User Sameer Khan's Avatar
    Join Date
    Oct 2011
    Location
    Bangalore, India
    Posts
    118

    Default

    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 ?
    Sameer Khan

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •