javascript - TabPanel 中元素的对齐方式

Question

我应该如何操作 TabPanel 中的元素？

例如，在第一个选项卡上，我有两个项目 - 这些是图表。但是，第 2 项与第 1 项（折线图）的底部对齐。如何将右侧的第二项（折线图）与左侧的第一项对齐？

这是ff代码

Ext.define('UM.view.main.umcontent',{
    extend: 'Ext.tab.Panel',
    xtype: 'umcontent',

    height: 400,
    width: 2000,
    tabPosition: 'left',

    tabRotation: 0,
    tabBar: {

        border: true,

    },

    defaults: {
        textAlign: 'left',
        bodyPadding: 15
    },




items: [{
    title: 'Home',
    autoScroll: true,
    items:[{
            xtype: 'OverallCost',

           },

           {
             xtype:'OverallCount'
           }

    ]

}, {
    title: 'Utilization Summary',
    autoScroll: true,
    items:[{

        xtype: 'Overall'
        }]
}, {
    title: 'TOPs'
}, {
    title: ' Cases'
},
{
    title: 'Members Details'

},
{
    title: 'Download Report'
}
]

})

Answer 1

有几个选项可以调整布局

1. 在您的父面板中使用layout:'border，然后为您要移动的每个项目指定区域（北部、东部、南部、西部或中心）。

2. 使用'layout:'absolute'然后定义每个项目的 x 和 y 坐标。请参阅此处的文档。

3. Use layout:'hbox'which is well defined here。