javascript - TabPanel 中元素的对齐方式

Question

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

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

这是 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 坐标。请参阅文档 here .

3. 使用定义明确的 layout:'hbox' here .