Question

我是SenchaTouch的新手。我已经开始使用应用程序了，结果到现在为止：http://mobz.com.br:86。（基于Sencha-Touch-tabs-and-toolbars-demo）

现在我开始玩它了，我很难把事情搞得一团糟。我有很多JQuery经验，但是关于这个库的设计，硬币还没有掉线。

我有一个包含5个部分的TabPanel。我将只关注一个部分，因为我的问题出在那里。

问题

As you can see in my app，当点击一个ingressos项目（英文门票）时，该应用程序会加载第二个面板，但会加载错误。

在没有标题栏的情况下加载它，没有“后退”按钮，并在右侧添加一个空的第六个按钮。

但是，如果我首先加载第二个面板，当页面加载时，它会在没有任何UI问题的情况下加载。

我的代码

首先我声明我的 ViewPort

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

就是这样。

我希望你们中的一些人能让病人阅读我的所有代码示例。我会感激任何帮助。

施洛米。

Answer 1

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

你有一个TabPanel，你有5个面板。如果在按问题中的描述单击故障单时运行代码，则代码会向TabPanel添加新窗格。但是你需要设置Ingression面板的活动项目（tabPanel中的第二个面板）。

现在开始解决方案;

第二个标签有一个面板（我会说是senchaTabItem），其布局是卡片布局。此面板中有一个面板，其中包含Ingressos列表。我们想要删除这个面板并替换新面板，这样我们就不应该调用tabPanel的方法，我们必须调用senchaTabItem的方法。

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

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

带有工作代码（代码如下）。

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

在您的网站中;它位于ingressos.js的第170行

我尝试过它有效，我希望有所帮助

Sencha Touch TabBar +页面导航。为什么它会破裂？

1 个答案: