如何使用 onclick 从不同的卡片激活 Sencha Touch 中的特定卡片

Question

我的应用中有几张不同的卡片，我正在尝试从我的主页屏幕激活我的一张子卡片。

这里是相关信息。

设置

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

主要

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

首页索引视图

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 控制器

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

Vimeo 索引视图

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

我用来尝试激活卡的模板 在这里你会看到 javascript 调用 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>'

最后，goToCard(); 方法

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

问题很简单...当我点击

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

如果我直接在控制台中运行代码

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

我得到以下输出。

子类
附加类：数组[0]
自动渲染：真
正文：El.Ext.Element.Ext.extend.constructor
cardSwitchAnimation：“幻灯片”
componentCls: "x-panel"
组件布局：子类
容器：El.Ext.Element.Ext.extend.constructor
停靠项目：Ext.util.MixedCollection
el: El.Ext.Element.Ext.extend.constructor
事件：对象
全屏：真
getTargetEl: 函数 () {
身高：306
隐藏：真实
hiddenOwnerCt：假
iconCls: "电视"
id: "rpc-controllers-VimeoController"
初始配置：对象
项目：Ext.util.MixedCollection
布局：子类
layoutOnShow: Ext.util.MixedCollection
监视器方向：真
mons：数组[0]
需求布局：假
originalGetTargetEl: function () {
ownerCt：子类
渲染数据：对象
渲染选择器：对象
渲染到：空
渲染：真
滚动：“垂直”
scrollEl: El.Ext.Element.Ext.extend.constructor
滚动条：Ext.util.Scroller.Ext.extend.constructor
标签：子类
标题：“视频”
宽度：798
原型：F

但实际上什么也没发生 :-(
基本上，我没有收到错误，也没有加载适当的视图。

我也试过
Ext.getCmp('rpc-controllers-VimeoController').layout.setActiveItem('rpc-views-Vimeo-index');

但是反响就更少了……

错误

如果我只是跑步
Ext.getCmp('rpc-controllers-VimeoController');
我可以在 items 数组中看到 'rpc-views-Vimeo-index' ID。

Answer 1

这是因为您的整个应用程序结构相当奇怪。您正在创建面板并出于某种原因将它们称为控制器，然后嵌套这些面板。

除此之外——你没有看到任何东西的原因是，当你在“rpc-controllers-VimeoController”面板上设置活动项目时，你从来没有告诉它改变正在显示的面板的活动项目—— - 从您的嵌套疯狂的外观来看，它是“rpc-rootPanel”。因此，您需要将“rpc-rootPanel”的活动项设置为“rpc-controllers-VimeoController”，然后将“rpc-controllers-VimeoController”的活动项设置为 rpc-views-Vimeo-index。 /掌脸

尽管在回答您的问题时采用了糟糕的设计实践，但您很可能只需这样做：

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

您需要有一些 if-thens 来检查您的链接的 panelId 并相应地设置根面板活动项。以上是特定于您引用的链接...