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 触摸在选项卡面板中显示图像的主要内容,如果未能解决你的问题,请参考以下文章