Sencha Touch TabBar + page navigation. Why it's breaking?

Question

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.

Yusuf K. Yusuf K. · Accepted Answer · 2011-11-29T15:45:00

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 + page navigation. Why it's breaking?

1 Answers