Sencha 触摸在选项卡面板中显示图像

Posted

技术标签:

【中文标题】Sencha 触摸在选项卡面板中显示图像【英文标题】:Sencha touch displaying image within tab panel 【发布时间】:2012-05-18 15:27:54 【问题描述】:

我试图在 view.js 中显示没有标签面板的图像 但是,尽管遵循了文档,但它似乎无法正常工作。谁能帮忙指出我做错了什么?

谢谢

App.js

Ext.application(
    name: 'hoodhelp1a',

    requires: [
        'Ext.MessageBox'
    ],

    views: ['Main'],

    isIconPrecomposed: true,

    launch: function() 
        // Destroy the #appLoadingIndicator element
        Ext.fly('appLoadingIndicator').destroy();

        // Initialize the main view
        Ext.Viewport.add(Ext.create('hoodhelp1a.view.Main'));
    ,

    onUpdated: function() 
        Ext.Msg.confirm(
            "Application Update",
            "This application has just successfully been updated to the latest version. Reload now?",
            function(buttonId) 
                if (buttonId === 'yes') 
                    window.location.reload();
                
            
        );
    
);

查看/Main.js

Ext.define("hoodhelp1a.view.Main", 
    extend: 'Ext.tab.Panel',
    requires: [
        'Ext.TitleBar',
        'Ext.Video',
        'Ext.Img',   
    ],
    config: 
        tabBarPosition: 'bottom',

        items: [
            
                title: 'Home',
                iconCls: 'home',
                xtype: 'container',
                layout: 'hbox',
                items: [
                
                    docked: 'top',
                    xtype: 'titlebar',
                    title: 'Welcome to Sencha Touch 2'
                ,
                
                        xtype: 'image',
                        src: 'http://www.sencha.com/assets/images/sencha-avatar-64x64.png'
                
            ]
            ,
            
                title: 'Get Started',
                iconCls: 'action',

                items: [
                    
                        docked: 'top',
                        xtype: 'titlebar',
                        title: 'Getting Started'
                    ,
                    
                        xtype: 'video',
                        url: 'http://av.vimeo.com/64284/137/87347327.mp4?token=1330978144_f9b698fea38cd408d52a2393240c896c',
                        posterUrl: 'http://b.vimeocdn.com/ts/261/062/261062119_640.jpg'
                    
                ]
            
        ]
    
);

【问题讨论】:

【参考方案1】:

由于您在第一个选项卡中为“容器”使用“hbox”布局,因此必须指定“flex”配置。 (例如,在“image”配置中设置“flex:1”)。

另一种选择是将此“容器”的布局设置为“适合”。

顺便说一句,'xtype:container' 不是必需的。

请参阅此小提琴以进行说明: http://www.senchafiddle.com/#X0Ejm

【讨论】:

谢谢!这是一个很大的帮助。

以上是关于Sencha 触摸在选项卡面板中显示图像的主要内容,如果未能解决你的问题,请参考以下文章

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

如何在 ext JS/Sencha 中隐藏选项卡面板

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

Sencha Touch 2:在选项卡面板中创建嵌套列表

Sencha如何在点击标签面板时更新视口?

基于选项卡面板选择在 R Shiny 中显示/隐藏 selectinput