How to activate a specific card in Sencha Touch from a different Card using onclick

Question

I've got a few different cards in my app, and I'm trying to activate one of my sub cards from my homepage screen.

Here is the pertinent information.

Setup

Ext.setup({
    id: 'Ext-setup',
    onReady: function () {
        rpc.main.init();
    }
});

Main

rpc.main = {
    init: function () {
        var rootPanel = new Ext.TabPanel({
            id: 'rpc-rootPanel',
            fullscreen: true,
            layout: 'card',
            region: 'center',
            items: [
                rpc.controllers.HomeController,
                rpc.controllers.VimeoController,
            ]
        });
    }
};

HomeController

rpc.controllers.HomeController = new Ext.Panel({
    id: 'rpc-controllers-homecontroller',
    layout: 'card',
    items: [rpc.views.Home.index],
    listeners: {
        activate: function () {
            if (rpc.stores.HomeStore.getCount() === 0) {
                // This store uses the rpc.templates.AboutDetails XTemplate
                rpc.stores.HomeStore.load();
            }
        }
    }
});

Home Index View

rpc.views.Home.index = new Ext.DataView({
    id: 'rpc-views-home-index',
    itemSelector: 'div.home-index',
    tpl: rpc.templates.AboutDetails,
    store: rpc.stores.HomeStore,
    fullscreen: true,
});

Vimeo Controller

rpc.controllers.VimeoController = new Ext.Panel({
    id: 'rpc-controllers-VimeoController',
    layout: 'card',
    fullscreen: true,
    items: [rpc.views.Vimeo.index,
            rpc.views.Vimeo.Details]
});

Vimeo Index View

rpc.views.Vimeo.index = new Ext.Panel({
    id: 'rpc-views-Vimeo-index',
    layout: 'fit',
    dockedItems: [{xtype: 'toolbar', title: 'Videos'}]
    // stuff left out to keep it clean
});

The Template I'm using to try and activate the card This is where you'll see the javascript call javascript:goToCard();

rpc.templates.AboutDetails = new Ext.XTemplate(
'   <tpl for=".">',
'      <div class="padded">',
'          <div class="rounded-div">',
'              <h1>RockPointe Church</h1>',
'              <span class="rpc-sub">One church meeting in multiple locations.</span>',
'          </div>',
'      <div>',
'      <div id="quick-nav">',
'          <ul>',
'               <li><span onclick="javascript:goToCard(\'rpc-controllers-VimeoController\',\'rpc-views-Vimeo-index\');">Videos</span></li>',
'               <li><span onclick="javascript:goToCard()">Events</span></li>',
'               <li><span onclick="javascript:goToCard()">Sites</span></li>',
'          </ul>',
'          <br clear="left">',
'      </div>',
'   </tpl>'

And finally, the goToCard(); method

function goToCard(panelId, cardId) {
    Ext.getCmp(panelId).setActiveItem(cardId);
}

The problem is simple... nothing happens when I click on the

<span onclick="javascript:goToCard(\'rpc-controllers-VimeoController\',\'rpc-views-Vimeo-index\');">Videos</span>

If I run the code directly in my console

Ext.getCmp('rpc-controllers-VimeoController').setActiveItem('rpc-views-Vimeo-index');

I get the following output.

subclass
additionalCls: Array[0]
autoRender: true
body: El.Ext.Element.Ext.extend.constructor
cardSwitchAnimation: "slide"
componentCls: "x-panel"
componentLayout: subclass
container: El.Ext.Element.Ext.extend.constructor
dockedItems: Ext.util.MixedCollection
el: El.Ext.Element.Ext.extend.constructor
events: Object
fullscreen: true
getTargetEl: function () {
height: 306
hidden: true
hiddenOwnerCt: false
iconCls: "tv"
id: "rpc-controllers-VimeoController"
initialConfig: Object
items: Ext.util.MixedCollection
layout: subclass
layoutOnShow: Ext.util.MixedCollection
monitorOrientation: true
mons: Array[0]
needsLayout: false
originalGetTargetEl: function () {
ownerCt: subclass
renderData: Object
renderSelectors: Object
renderTo: null
rendered: true
scroll: "vertical"
scrollEl: El.Ext.Element.Ext.extend.constructor
scroller: Ext.util.Scroller.Ext.extend.constructor
tab: subclass
title: "Video"
width: 798
proto: F

But nothing actually happens :-(
Basically, I don't get an error, nor does the appropriate view load.

I also tried
Ext.getCmp('rpc-controllers-VimeoController').layout.setActiveItem('rpc-views-Vimeo-index');

But the response was even less...

False

If I just run
Ext.getCmp('rpc-controllers-VimeoController');
I can see the 'rpc-views-Vimeo-index' ID within the items array.

Why are you escaping the single quotes in the onclick handler? — Jared Farrish
because it's not in HTML, but rather in a javascript template. — Chase Florell
Ahh, I see. Why don't you attach the event handler, instead of hardcoding it? — Jared Farrish
if you look at my edits, even calling the "supposedly" exact method directly in the console STILL doesn't load the view as required. If I can get the view to load like I want, I'll have no problem coding it however I need to to keep it DRY. — Chase Florell

chrixian chrixian · Accepted Answer · 2011-08-13T22:40:07

This is because your whole application structure is fairly bizarre. You're creating panels and calling them controllers for some reason and then nesting these panels.

All that aside-- the reason you're not seeing anything is because while you are setting the active item on the 'rpc-controllers-VimeoController' panel you never tell it to change the active item of the panel being displayed-- which from the looks of your nesting madness is 'rpc-rootPanel'. So you'd need to set the active item of 'rpc-rootPanel' to your 'rpc-controllers-VimeoController' and then set the active item of 'rpc-controllers-VimeoController' to rpc-views-Vimeo-index. /facepalm

Despite the bad design practices to answer your question you can most likely just do this:

 function goToCard(panelId, cardId) {
   Ext.getCmp('rpc-rootPanel').setActiveItem(1);
   Ext.getCmp(panelId).setActiveItem(cardId);
 }

You'll need to have some if-thens in there to check what panelId your link is for and set the root panel active item accordingly. The above is specific for your referenced link...

How to activate a specific card in Sencha Touch from a different Card using onclick

1 Answers