Question

I have a MVC Sencha Touch application I’m building and am having some issues getting the TabPanel to function correctly. The issue is this, when I have my PosViewport.js like this, everything works fine:

touch.views.PosViewport = new Ext.extend(Ext.TabPanel, {
initComponent: function () {
    console.log("inside initComponent() of PosViewport.js");
    touch.views.PosViewport.superclass.initComponent.call(this);
},
tabBar: {
    dock: 'bottom',
    layout: {
        pack: 'center'
    }
},
layout: 'fit',
scroll: 'vertical',
items: [
    {
        title: 'Reciepts',
        iconCls: 'bookmarks',
        html: 'one'
    },
    {
        title: 'POS',
        iconCls: 'Favorites',
        html: 'two'
    }
]
});

Here, everything is great! The tab bar shows up on the bottom, it fits perfectly, and I can switch back and forth between the two with no problems.

However, instead of keeping those panels inside my PosViewport.js file, let’s move them out to two seperate files:

View1.js:

touch.views.View1 = new Ext.extend(Ext.Panel, {
initComponent: function () {
    touch.views.View1.superclass.initComponent.call(this);
},
layout: 'fit',
scroll: 'vertical',
fullscreen : true,
title: 'Reciepts',
iconCls: 'bookmarks',
html: 'panel one'
});

and View2.js:

touch.views.View2 = new Ext.extend(Ext.Panel, {
initComponent: function () {
    touch.views.View2.superclass.initComponent.call(this);
},
layout: 'fit',
scroll: 'vertical',
fullscreen : true,
title: '2',
iconCls: 'bookmarks',
html: 'panel two'
});

I add both new views to my index.html. Now, I update my PosViewport.js to point to the new views:

touch.views.PosViewport = new Ext.extend(Ext.TabPanel, {
initComponent: function () {
    console.log("inside initComponent() of PosViewport.js");
    touch.views.PosViewport.superclass.initComponent.call(this);
},
tabBar: {
    dock: 'bottom',
    layout: {
        pack: 'center'
    }
},
layout: 'fit',
scroll: 'vertical',
items: [ touch.views.View1, touch.views.View2]
});

And it all goes to hell. The Bottom Tab Bar is not visible, as only a tiny piece of the top is visible on the page. The panels do not show up at all, I cannot see their HTML content at all.

What is going on here? I have absolutely no idea why it is behaving like this. Any pointers in the right direction are much appreciated, thank you!

Answer 1

In the second case you created two classes by this:

touch.views.View2 = new Ext.extend(Ext.Panel, {          // Class definition

whereas you needed two instances of these panels. So, add the items like this:

items: [new touch.views.View1(), new touch.views.View2()]   // Panel instance

This should work now. And remove the fullscreen:true option from these panels. fullscreen means, it will make the panels take whole viewport area.