Question

我遇到了Sencha Touch 2和vbox flexing的问题。这是我的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();
            }
        }
    );
}

}）;

如果我运行此代码并转到测试面板，则不会显示任何内容。我希望它（在测试用例中）显示四种不同颜色的容器，顶部一个和底部一个是中间容器垂直尺寸的两倍。

这不是获得该结果的方法吗？我哪里出错？

谢谢！

Answer 1

设置布局：'适合'为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: [

Sencha Touch 2和浮动，弯曲面板

1 个答案: