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.

Answer 1

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…