Sencha Touch 2 - 旋转木马仅在构建后卡在第一个面板上

Posted

技术标签:

【中文标题】Sencha Touch 2 - 旋转木马仅在构建后卡在第一个面板上【英文标题】:Sencha Touch 2 - Carousel Stuck on First Panel Only After Build 【发布时间】:2012-09-26 00:32:33 【问题描述】:

在我通过 sencha sdk 构建应用程序之前,我在面板中有一个轮播,它显示和工作正常。然而,在我构建之后,轮播仍然可以正常显示,但不再允许我在项目之间滑动。

Ext.define('SycsApp.view.HotOffers', 
    extend: 'Ext.Panel',
    requires: ['Ext.carousel.Carousel', 'Ext.TitleBar'],

    config: 
            layout: 'card',
            items: [
                
                    docked: 'top',
                    xtype: 'titlebar',
                    ui: 'top-sub',
                    title: 'Hot Offers',
                ,
                
                    id: 'hotOffersCarousel',
                    xtype: 'carousel',
                    width: '100%',
                    items: [
                        
                            html : 'Item 1',
                            style: 'background-color: #5E99CC'
                        ,
                        
                            html : 'Item 2',
                            style: 'background-color: #759E60'
                        ,
                        
                            html : 'Item 3'
                        
                    ]
                
            ]
    
);

布局设置为卡片的原因是该视图是包含选项卡面板的一部分。在构建之后运行应用程序时,我也没有从控制台收到任何错误消息。

任何关于为什么会发生这种情况的帮助将不胜感激。

【问题讨论】:

【参考方案1】:

问题是由添加到主卡视图的方式引起的。

Ext.define('SycsApp.view.Main', 
extend: 'Ext.tab.Panel',
xtype: 'mainView',
requires:  ['SycsApp.view.HotOffers'],

config: 
    tabBarPosition: 'bottom',
    id: 'MainView',
    ui: 'bottom',
    layout: 'card',
    items: [
        
            title: 'Hot Offers',
            layout: 'fit',
            iconCls: 'hotoffer',
            //items: [Ext.create('SycsApp.view.HotOffers')], // carousel doesn't work after build
            items:  [xtype: 'hotOffersView'] // carousel works after build
        ,
        
            title: 'All Savings',
            layout: 'fit',
            iconCls: 'list',
            items:  [xtype: 'allSavingsMainView']
        
    ]

);

xtype: 'hotOffersView' 必须添加到 Hot Offers 视图中:

Ext.define('SycsApp.view.HotOffers', 
    extend: 'Ext.Panel',
    xtype: 'hotOffersView',
    requires: ['Ext.carousel.Carousel', 'Ext.TitleBar'],

    config: 
            layout: 'card',
            items: [
                
                    docked: 'top',
                    xtype: 'titlebar',
                    ui: 'top-sub',
                    title: 'Hot Offers',
                ,
                
                    id: 'hotOffersCarousel',
                    xtype: 'carousel',
                    width: '100%',
                    items: [
                        
                            html : 'Item 1',
                            style: 'background-color: #5E99CC'
                        ,
                        
                            html : 'Item 2',
                            style: 'background-color: #759E60'
                        ,
                        
                            html : 'Item 3'
                        
                    ]
                
            ]
    
);

【讨论】:

以上是关于Sencha Touch 2 - 旋转木马仅在构建后卡在第一个面板上的主要内容,如果未能解决你的问题,请参考以下文章

Sencha Touch - 为啥在我的自定义组件中未定义此功能?

Sencha Touch 应用部署到 iPhone 和 Android

Sencha Touch 2 KitchenSink 示例构建失败

Sencha touch 2 原生构建未加载

无法使用 Sencha Cmd 3.1.1.274 构建 Sencha Touch 2.1 应用程序

如何使用 sencha-touch.jsb3 构建 Sencha Touch?