SenchaTouch2とvboxの屈曲に問題があります。これがPanelの私のコードです（簡単にするために変更されました。実際のPanelははるかに複雑ですが、これが要約されます）：
Ext.define('risbergska2.view.Test', {
extend: 'Ext.Panel',
xtype: 'test',
config: {
title: 'Test',
iconCls: 'home',
items: [
{
xtype: 'container',
layout: 'vbox',
items: [
{
xtype: 'container',
flex: 2,
style: 'background-color: #f90;'
},
{
xtype: 'container',
flex: 1,
style: 'background-color: #9f0;'
},
{
xtype: 'container',
flex: 1,
style: 'background-color: #0f9;'
},
{
xtype: 'container',
flex: 2,
style: 'background-color: #90f;'
}
]
}
]
}
}）
そしてこれが私のMain.jsです：
Ext.define("risbergska2.view.Main", {
extend: 'Ext.tab.Panel',
requires: [
'Ext.TitleBar',
'Ext.Video'
],
config: {
tabBarPosition: 'bottom',
items: [
{
xtype: 'homeloggedinview'
},
{
xtype: 'myview'
},
{
xtype: 'programview'
},
{
xtype: 'socialview'
},
{
xtype: 'aboutview'
},
{
xtype: 'test'
}
]
}
}）;
私のapp.js：
Ext.application({
name: 'risbergska2',
requires: [
'Ext.MessageBox'
],
views: ['Main', 'HomeLoggedIn', 'My', 'Program', 'Social', 'About', 'Test'],
launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
// Initialize the main view
Ext.Viewport.add(Ext.create('risbergska2.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();
}
}
);
}
}）;
このコードを実行してテストパネルに移動すると、何も表示されません。（テストケースでは）4つの異なる色の4つの異なるコンテナーを表示したいと思います。上のコンテナーと下のコンテナーは、中央のコンテナーの垂直サイズの2倍です。
これはその結果を得る方法ではありませんか？どこが間違っているのですか？
ありがとう！