Sencha Touch TabBar + 页面导航.为什么会断呢? [英] Sencha Touch TabBar + page navigation. Why it's breaking?

问题描述

我是 SenchaTouch 的新手.我已经开始开发一个应用程序，直到现在结果是这样的:http://mobz.com.br:86.(基于 Sencha-Touch-tabs-and-toolbars-demo)

现在我开始玩它，我很难把事情摆在我的脑海里.我有很多 JQuery 经验，但关于这个库的设计，硬币还没有下降.

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

问题

正如您在我的应用程序中看到的，当您点击一项 ingressos(英文门票)时)，应用加载第二个面板，但加载时出现错误.

它在没有标题栏和后退按钮的情况下加载它，并且还在右侧添加了一个空的第六个按钮.

但如果我先加载第二个面板，当页面加载时，它加载时不会出现任何 UI 问题.

我的代码

首先我声明我的ViewPort

Mobz.views.Viewport = Ext.extend(Ext.TabPanel, {全屏:真实，初始化组件:函数(){Ext.apply(这个，{标签栏:{码头:'底部'，布局: {包:'中心'}},项目: [{ xtype: 'destaques', id: 'home' },{ xtype: 'ingressos' },{ xtype: 'mobilizacoes' },{ xtype: '地方' },{ xtype: 'minhaconta' }]});Mobz.views.Viewport.superclass.initComponent.apply(this, arguments);}});

之后，在 ingressos.js 文件中，我定义了标签.

首先我得到了将项目加载到其中的面板.

Mobz.views.Ingressos = Ext.extend(Ext.Panel, {id: "ingressos",title: "Ingressos",//页面标题iconCls: "arrow_right",//底部标签的图标styleHtmlContent: 真,全屏:真实，布局:'卡片'，initComponent: 函数 () {Ext.apply(这个，{停靠项目:[{xtype: "工具栏",标题:Ingressos"}],项目:[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，商店:Mobz.stores.IngressosStore，onItemTap: 函数 (subIdx) {//Mobz.views.IngressoCinemaList.update(subIdx);Mobz.views.viewport.setActiveItem(Mobz.views.IngressoCinemaList, { type: 'slide', direction: 'left' });}});

这是第二个面板.

第一个面板所在的面板.

Mobz.views.IngressoTitle = new Ext.Panel({id: '入口标题',tpl:IngressoTitle_Template，数据:Mobz.stores.IngressoTitle_Store});Mobz.views.IngressoCinemaList = new Ext.List({id: 'ingressocinemalist',itemTpl:IngressoCinemaList_Template，商店:Mobz.stores.IngressoCinemaListStore，弹性:1，分组:真，停靠项目:[{xtype: '工具栏',项目: [{回信'，ui: '回来',处理程序:函数(){Mobz.views.viewport.setActiveItem(Mobz.ingressos, { type: 'slide', direction: 'right' });}}]}],onItemDisclosure:函数(){app.views.viewport.setActiveItem(Mobz.views.IngressosHorario, { type: 'slide', direction: 'left' });}});Mobz.views.Ingresso = new Ext.Panel({id: 'ingresso',布局: {类型:'vbox'，对齐:'适合'},项目:[Mobz.views.IngressoHorario_IngressoECinemaTitles, Mobz.views.IngressoCinemaList]});

就是这样.

我希望你们中的一些人有耐心阅读我所有的代码示例.我将不胜感激.

施洛米.

解决方案

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

您有一个 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 行

我试过了，效果不错，希望能帮到你

I'm a newbie to SenchaTouch. I have started working on an App and the results are this until now: http://mobz.com.br:86. (based on the Sencha-Touch-tabs-and-toolbars-demo)

Now I started playing with it and I have difficulties to set things strait in my head. I have lot of JQuery experience, but regarding the design of this library, the coin haven't dropped yet.

I got a TabPanel with 5 sections. I will focus only in one section cause there where my problem is.

The Problem

As you can see in my app, when one clicks an item of ingressos (tickets in English), the app loads the second panel, but load it with bugs.

It loads it without the title bar, without the Back button, and also add an empty sixth button on the right.

But if I load the second panel first, when the page loads, it loads without any UI issues.

My Code

First I declare my 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);
    }
});

Than after, at the ingressos.js file, I define the tab.

First I got the panel that will load the items into it.

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

This is the initial item that load into the panel.

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

And that's the second panel.

The panel where the first panel goes to.

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

That's it.

I hope some of you guys will have the patient to read all my code examples. I'll appreciate any help.

Shlomi.

解决方案

First, you must understand the logic about the panels.

You have an TabPanel and you have 5 panel in it. If you run your code when you click a ticket as you described in problem, your code added a new pane to TabPanel. But you need to set active item of Ingression panel(second panel which is in tabPanel).

Now start the solution;

The second tab has a panel(I will say senchaTabItem) whose layout is card layout. And this panel has a panel in it with list of Ingressos. We want to remove this panel and replace the new panel so we should not call the tabPanel's method, we must call to senchaTabItem's method.

So if you replace below code

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

with working code(below code).

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

In your site; it is at line 170 in ingressos.js

I tried and it works, I hope it helps

这篇关于Sencha Touch TabBar + 页面导航.为什么会断呢?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！