1

我在使用 Sencha Touch 2 和 vbox flexing 时遇到问题。这是我的面板代码（为简单起见进行了修改，真正的面板要复杂得多，但归根结底就是这样）：

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

1 回答 1

0

设置布局：“适合”risbergska2.view.Test

Ext.define('risbergska2.view.Test', {
extend: 'Ext.Panel',
xtype: 'test',


config: {
    title: 'Test',
    iconCls: 'home',
    layout : 'fit',
    items: [
        {
            xtype: 'container',
            layout: 'vbox',
            items: [
于 2012-09-19T10:13:01.247 回答