Sencha Touch 2 - TabPanel 在 MVC 设计的 App 中不起作用

Posted

技术标签:

【中文标题】Sencha Touch 2 - TabPanel 在 MVC 设计的 App 中不起作用【英文标题】:Sencha Touch 2 - TabPanel does not work in MVC designed App 【发布时间】:2011-12-21 09:23:34 【问题描述】:

今天给你一个简单的问题...

这行得通:

var carousel = Ext.create('Ext.Carousel', 
            fullscreen: 'true',

            //load in views view clean instantiation using
            // the widget.alias's defined in each view... yea
            // For some reason, putting flex on these components... oh...
            // Have to call directly in by just the xtype since these are just
            // references..
            items: [
                 
                    xtype: 'Main'
                ,
                 
                    xtype: 'CommentList'
                                
            ]

这不起作用:

var tabpanel = Ext.create('Ext.TabPanel', 
            fullscreen: 'true',
            tabBarPosition: 'bottom',

            defaults: 
                stylehtmlContent: true
            ,

            //load in views view clean instantiation using
            // the widget.alias's defined in each view... yea
            // For some reason, putting flex on these components... oh...
            // Have to call directly in by just the xtype since these are just
            // references..
            items: [
                 
                    xtype: 'Main',
                    title: 'The Main',
                    iconCls: 'user'
                ,
                 
                    xtype: 'CommentList',
                    title: 'Comments',
                    iconCls: 'user'
                                
            ]

        );

如您所见,它们几乎相同,除了一个是 TapPanel(添加了所需的默认配置),另一个是轮播。

其他一切都完全相同....这是我按照 MVC 架构设计的 Sencha Touch 2.0 应用的 app.js。

TabPanel 不工作的结果是我只看到第一个视图(Main),屏幕底部没有出现标签栏。

任何想法我的问题可能是什么?

【问题讨论】:

【参考方案1】:

我不确定这是否是一个问题,但在我的代码中,该行是:

Ext.create("Ext.tab.Panel", 

不是:

Ext.create('Ext.TabPanel', 

【讨论】:

【参考方案2】:

全屏应该是fullscreen: true 而不是fullscreen: 'true'。您还可以添加此代码以使它们切换:

cardSwitchAnimation: type: "fade", duration: 1000,
layout: "card",

没有测试它,但它对我有用(从我自己的代码的 sn-p 得到它)

【讨论】:

Sencha 2.0 Pr2 似乎没有这个 cardSwitch 配置...sencha.com/forum/…有什么想法吗? 似乎添加“卡片”布局会导致错误“未捕获的 TypeError:无法调用 null 的方法 'setReverse'”......你以前见过类似的东西吗? 我想添加...我还收到“对象 [对象对象] 没有方法 'getAnimation'”的错误 .. 这发生在 Panel.js 文件中(在sdk 源)...我确保将 layout: 'card' 和 cardSwitchAnimation: type: "fade", duration: 1000 添加到选项卡面板,但这是我得到的错误...也许有一些基本的东西接线我做错了吗?

以上是关于Sencha Touch 2 - TabPanel 在 MVC 设计的 App 中不起作用的主要内容,如果未能解决你的问题,请参考以下文章

sencha touch 2 中未加载的项目

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

如何在 Sencha Touch 中销毁非活动视图

Sencha Touch TabBar 在标签左侧添加按钮

HTML5开发实战——Sencha Touch篇

如何在 TabPanel 中嵌入 NestedList?