Sencha touch Sencha Touch TabBar+；页面导航。为什么'；什么东西坏了？

我是SenchaTouch的新手。我已经开始开发一个应用程序，结果如下：。（基于

现在我开始玩它了，我很难把事情弄清楚。 我有很多JQuery的经验，但是关于这个库的设计，硬币还没有落下

我有一个5个部分的标签面板。我将只集中在一个部分，因为我的问题就在那里

问题

，当你点击一项ingressos（英语票证）时，应用程序会加载第二个面板，但会加载错误

它加载时不带标题栏，不带后退按钮，并且在右侧添加一个空的第六个按钮

但是如果我先加载第二个面板，当页面加载时，它加载时没有任何UI问题

我的代码

首先，我声明我的视口

Mobz.views.Viewport = Ext.extend(Ext.TabPanel, {
    fullscreen: true,
    initComponent: function() {
        Ext.apply(this, {
            tabBar: {
                dock: 'bottom',
                layout: {
                    pack: 'center'
                }
            },
            items: [
                { xtype: 'destaques', id: 'home' },
                { xtype: 'ingressos' },
                { xtype: 'mobilizacoes' },
                { xtype: 'locais' },
                { xtype: 'minhaconta' }
            ]
        });
        Mobz.views.Viewport.superclass.initComponent.apply(this, arguments);
    }
});

之后，在ingressos.js文件中，我定义了选项卡

首先，我得到了一个面板，可以将项目载入其中

Mobz.views.Ingressos = Ext.extend(Ext.Panel, {
    id: "ingressos",
    title: "Ingressos", //title of the page
    iconCls: "arrow_right", // icon of the tab at the bottom
    styleHtmlContent: true,
    fullscreen: true,
    layout: 'card',
    initComponent: function () {
        Ext.apply(this, {
            dockedItems: [{
                xtype: "toolbar",
                title: "Ingressos"
            }],
            items: [Mobz.views.IngressosList]
        });
        Mobz.views.Ingressos.superclass.initComponent.apply(this, arguments);
    }
});
Ext.reg('ingressos', Mobz.views.Ingressos);

这是加载到面板中的初始项

Mobz.views.IngressosList = new Ext.List({
    id: 'ingressoslist',
    itemTpl: IngressosList_Template,
    store: Mobz.stores.IngressosStore,
    onItemTap: function (subIdx) {
        //Mobz.views.IngressoCinemaList.update(subIdx);
        Mobz.views.viewport.setActiveItem(Mobz.views.IngressoCinemaList, { type: 'slide', direction: 'left' });
    }
});

这是第二个面板。

第一个面板所指向的面板

Mobz.views.IngressoTitle = new Ext.Panel({
    id: 'ingressotitle',
    tpl: IngressoTitle_Template,
    data: Mobz.stores.IngressoTitle_Store
});
Mobz.views.IngressoCinemaList = new Ext.List({
    id: 'ingressocinemalist',
    itemTpl: IngressoCinemaList_Template,
    store: Mobz.stores.IngressoCinemaListStore,
    flex: 1, grouped: true,
    dockedItems: [{
            xtype: 'toolbar',
            items: [{
                text: 'Back',
                ui: 'back',
                handler: function () {
                    Mobz.views.viewport.setActiveItem(Mobz.ingressos, { type: 'slide', direction: 'right' });
                }
            }]
        }
    ],
    onItemDisclosure: function () {
        app.views.viewport.setActiveItem(Mobz.views.IngressosHorario, { type: 'slide', direction: 'left' });
    }
});
Mobz.views.Ingresso = new Ext.Panel({
    id: 'ingresso',
    layout: {
        type: 'vbox',
        align: 'fit'
    },
    items: [Mobz.views.IngressoHorario_IngressoECinemaTitles, Mobz.views.IngressoCinemaList]
});

就这样

我希望你们中的一些人能让患者阅读我所有的代码示例。我将感谢任何帮助

---

Shlomi.

首先，您必须了解面板的逻辑

您有一个选项卡面板，其中有5个面板。如果您在单击票证时运行代码，如问题中所述，您的代码会在TabPanel中添加一个新窗格。但您需要设置Ingression面板（tabPanel中的第二个面板）的活动项

现在开始解决方案

第二个选项卡有一个面板（我会说senchaTabItem），其布局是card布局。这个面板中有一个面板，上面有一个SOS列表。我们想要移除这个面板并替换新的面板，所以我们不应该调用tabPanel的方法，我们必须调用senchaTabItem的方法

所以如果你替换下面的代码

Mobz.views.viewport.setActiveItem(Mobz.views.IngressoCinemaList, { type: 'slide', direction: 'left' });

带工作代码（以下代码）

在您的站点中；它位于ingressos.js中的第170行

---

我试过了，效果很好，我希望它能帮上忙。

现在工作不正常。我只有三个字来回复你：谢谢你，非常感谢！！！！！它成功了。谢谢！！！：）你帮了我很多。现在我可以继续我的应用了。谢谢我得再请你帮忙。在实现了这种方法之后，我遇到了另一个我想问的问题——访问DockedItems。我发表了一个关于它的新问题。你觉得你可以看看那边吗？谢谢：）

Mobz.views.viewport.getActiveItem().setActiveItem(Mobz.views.IngressoCinemaList, { type: 'slide', direction: 'left' });