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

Posted

技术标签:

【中文标题】MVC Sencha Touch 无法正确显示选项卡面板【英文标题】:MVC Sencha Touch Won't Properly Display Tab Panels 【发布时间】:2011-11-03 23:59:44 【问题描述】:

我正在构建一个 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 内容。

这里发生了什么?我完全不知道它为什么会这样。非常感谢任何正确方向的指示,谢谢!

【问题讨论】:

听起来您遇到了 javascript 异常。尝试在打开 JavaScript 控制台的情况下在 chrome 中运行它,以便查看任何错误。 @JasonFreitas,感谢您的回复!不幸的是,在这两种情况下都没有 javascript 错误 【参考方案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 无法正确显示选项卡面板的主要内容,如果未能解决你的问题,请参考以下文章

sencha touch 无法正确安装cordova插件

sencha touch 在按钮的选项卡上隐藏和显示组件

Sencha Touch - 滚动到 TabBar 上的最后一个标签

Sencha Touch 2 - 选项卡式面板中的轮播

选项卡式工具栏内的 Sencha Touch List 组件

Sencha Touch AJAX 调用 MVC