Sencha触摸在选项卡面板内显示图像
-
11-12-2019 - |
题
我正在尝试在我的视图中显示没有选项卡面板的图像 但是,尽管遵循了文档,它似乎无法工作。有人可以帮助指出我做错了什么吗?
谢谢
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'
}
]
}
]
}
});
. 解决方案
由于您在第一个选项卡中使用了“容器”的“HBox”布局,必须指定“Flex”配置。(例如,在“图像”配置中设置“Flex:1”。
另一个选项是将此“容器”的布局设置为“适合”。 顺便说一下,“XTYPE:容器”不是必需的。
看到这个小提琴用于插图目的: http://www.senchafiddle.com/#x0ejm
不隶属于 StackOverflow