Question

我正在构建一个 MVC Sencha Touch 应用程序，并且在使TabPanel正常运行时遇到了一些问题。问题是，当我有这样的PosViewport.js时，一切正常：

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

在这里，一切都很棒！标签栏显示在底部，非常合适，我可以在两者之间来回切换，没有任何问题。

但是，不要将这些面板保留在我的PosViewport.js文件中，让我们将它们移到两个单独的文件中：

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

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

我将两个新视图添加到我的index.html。现在，我将我的PosViewport.js更新为指向新视图：

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

这一切都是地狱。底部标签栏不可见，因为页面上只能看到顶部的一小部分。面板根本没有显示，我根本看不到他们的HTML内容。

这里发生了什么？我完全不知道它为什么会这样。非常感谢任何正确方向的指针，谢谢！

Answer 1

在第二种情况下，您创建了两个类：

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

而您需要这些面板的两个实例。所以，添加如下项目：

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

现在应该可以了。并从这些面板中删除fullscreen:true选项。 fullscreen表示，它会使面板占据整个视口区域。

MVC Sencha Touch无法正确显示选项卡面板

1 个答案: