Newbie question: What am I doing wrong with my app. Eager to learn :)

[neoswf]

Hi to all forum supporters. New guy here

It's my first app. I'm trying to create a Tabbed Bar interface, when each tab lead to a section that has 4-5 levels inside.
I chose to base my app on the following tutorial: Tabs-and-toolbars
I tool all its MVC stracture, and started implementing my desired compenents.

I uploaded my site to my ftp server: http://m.webdesign.org.il/Mobz/
(I hope its fine for you to see the code there. I know it a lot to ask from you guys, cause I tell u to do the job of searching for the code, but I dont want to increase the post size, and the app is really small for now)

I encountered a few problems.

1. For some reason my carousel stopped showing the dors indicators beneath it.
   its also not rendered imidiatly onload in my iphone (add to homescreen). Only after twisting its direction by 90 degrees, they appear, but they don't adjust to the screen size as before, and enters to other's carousel slide.
2. My grouped list.
   1. I have a grouped list inside the second tab- Ingressos.
      When one click an item in the Ingresso list, he reach a grouped list. At start that list worked fine, but than, as I progressed with my dev, the list stopped been grouped, and got a little out of the focus of the viewport. (Same reason of the problem of my carousel)
      Thing is that after resizing my chrome window, it correcting itself.
   2. Another problem happenes after returning back to the initial list. All the layout gets stuck, and I get a JS error:
      

      Uncaught TypeError: Cannot read property 'parentNode' of undefined.

      This makes the tab to stop functioning (it switches the titles only, but not the viewport content), and also entering again to see another grouped list, getting stuck as well.

I'm sure I don't get Sencha and I'm doing/implementing something in a wrong way.
I think my problem somehow is with my panel or viewport. I think I'm not assigning things correct to it.

Any help, direction will be highly welcome and appreciated

[neoswf]

Viewport.js

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

Destaques (First tab. Initial screen)

var carousel = new Ext.Carousel({    fullscreen: true,
    centered: true,
    defaults: {
        cls: 'CarouselCard',
        styleHtmlContent: true
    },
    items: [{
        title: 'tab 1',
        html: '<img src="app/images/patofu0.jpg" width="320" height="200"/><br/>Patofu no Uspi'
    },
    {
        title: 'Tab 2',
        html: '<img src="app/images/patofu1.jpg" width="320" height="200"/><br/>Patofu no Uspi'
    },
    {
        title: 'Tab 3',
        html: '<img src="app/images/Patofu2.jpg" width="320" height="200"/><br/>Patofu no Uspi'
    }]
});


Mobz.views.Destaques = Ext.extend(Ext.Panel, {
    title: "Destaques",
    iconCls: "favorites",
    badgeText: 111,
    styleHtmlContent: true,
    initComponent: function() {
        Ext.apply(this, {
            dockedItems: [{
                xtype: "toolbar",
                title: "Destaques"
            }],
            items:[carousel]
        });
        Mobz.views.Destaques.superclass.initComponent.apply(this, arguments);
    }
});
Ext.reg('destaques', Mobz.views.Destaques);

Ingressos (Second tab)

Mobz.views.Ingressos = Ext.extend(Ext.NestedList, {    title: "Ingressos",
    iconCls: "arrow_right",
    cardSwitchAnimation: 'slide',
    initComponent: function () {
        Ext.apply(this, {
            store: Mobz.ingressosstore,
            getDetailCard: function (item, parent) {
                var itemData = item.attributes.record.data;
                return itemData.card;
            }
        });
        Mobz.views.Ingressos.superclass.initComponent.apply(this, arguments);
    }
});
Ext.reg('ingressos', Mobz.views.Ingressos);

IngressoCard.js

Mobz.IngressoCardDetailPanel = new Ext.Panel({    id: 'ingressocarddetailpanel',
    tpl: 'Hello, {data}!',
    dockedItems: [
        {
            xtype: 'toolbar',
            items: [{
                text: 'back',
                ui: 'back',
                handler: function () {
                    Mobz.views.viewport.setActiveItem('ingressohorarioslist', { type: 'slide', direction: 'right' });
                }
            }]
        }
    ]
});


Mobz.IngressoCardListPanel = new Ext.List({
    id: 'ingressohorarioslist',
    store: Mobz.IngressosDatas,
    itemTpl: '<div class="IngrsData"><img src="{logo}" /> <strong>{cinema}</strong> {horarios}</div>',
    grouped: true,
    onItemDisclosure: function (record, btn, index) {
        Mobz.IngressoCardDetailPanel.update(record.data);
        Mobz.views.viewport.setActiveItem('ingressocarddetailpanel');
    }
});


Mobz.views.Ingressocard = Ext.extend(Ext.Panel, {
    fullscreen: true,
    layout: 'card',
    cardSwitchAnimation: 'slide',
    items: [Mobz.IngressoCardListPanel, Mobz.IngressoCardDetailPanel]
});


Ext.reg('ingressocard', Mobz.views.Ingressocard);

IngressoDataStore.js

Ext.regModel('Contact', {    fields: ['data', 'cinema']
});


Mobz.IngressosDatas = new Ext.data.Store({
    model: 'Contact',
    sorters: 'data',
    getGroupString: function (record) {
        return record.get('data');
    },
    data: [
        { data: "Sábado, 04 de julho", cinema: "Cinemark Cinetam", logo: "Images/\CinemasLogos/\logo_cinetam.jpg", horarios: "14:50 17:50 21:30" },
        { data: "Sábado, 04 de julho", cinema: "Cinemark UCI", logo: "Images/\CinemasLogos/\logo_uci.jpg", horarios: "14:50 17:50 21:30" },
        { data: "Sábado, 04 de julho", cinema: "Cinemark Cinetam", logo: "Images/\CinemasLogos/\logo_cinetam.jpg", horarios: "14:50 17:50 21:30" },
        { data: "Sábado, 06 de julho", cinema: "Cinemark UCI", logo: "Images/\CinemasLogos/\logo_uci.jpg", horarios: "14:50 17:50 21:30" },
        { data: "Sábado, 06 de julho", cinema: "Cinemark Cinetam", logo: "Images/\CinemasLogos/\logo_cinetam.jpg", horarios: "14:50 17:50 21:30" },
        { data: "Sábado, 06 de julho", cinema: "Cinemark UCI", logo: "Images/\CinemasLogos/\logo_uci.jpg", horarios: "14:50 17:50 21:30" },
        { data: "Sábado, 08 de julho", cinema: "Cinemark Cinetam", logo: "Images/\CinemasLogos/\logo_cinetam.jpg", horarios: "14:50 17:50 21:30" },
        { data: "Sábado, 10 de julho", cinema: "Cinemark UCI", logo: "Images/\CinemasLogos/\logo_uci.jpg", horarios: "14:50 17:50 21:30" },
        { data: "Sábado, 11 de julho", cinema: "Cinemark Cinetam", logo: "Images/\CinemasLogos/\logo_cinetam.jpg", horarios: "14:50 17:50 21:30" },
        { data: "Sábado, 13 de julho", cinema: "Cinemark UCI", logo: "Images/\CinemasLogos/\logo_uci.jpg", horarios: "14:50 17:50 21:30" },
        { data: "Sábado, 13 de julho", cinema: "Cinemark Cinetam", logo: "Images/\CinemasLogos/\logo_cinetam.jpg", horarios: "14:50 17:50 21:30" },
        { data: "Sábado, 15 de julho", cinema: "Cinemark UCI", logo: "Images/\CinemasLogos/\logo_uci.jpg", horarios: "14:50 17:50 21:30" }
    ]
});

IngressoStore.js

Mobz.ingressosstore = new Ext.data.TreeStore({    model: 'ListItem',
    root: {
        items: [{
            text: 'ESPN 3D - FINAL UEFA CHAMPIONS LEAGUE',
            card: { xtype: 'ingressocard' },
            leaf: true
        },
        {
            text: 'Foo Fighters - Back and Forth + Show 3D',
            card: { xtype: 'ingressocard' },
            leaf: true
        },
        {
            text: 'U23D - Show 3D EXCLUSIVO para os cinemas',
            card: { xtype: 'ingressocard' },
            leaf: true
        }]
    },
    proxy: {
        type: 'ajax',
        reader: {
            type: 'tree',
            root: 'items'
        }
    }
});