Alignment of elements in TabPanel

Question

How should I manipulate elements inside a TabPanel?

For example on the 1st tab I have two Items - these are charts. However the 2nd item is aligned at the bottom of the 1st item (linechart). How can I align the second item (line chart) on the right side with the first on the left?

Here's the ff code

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'
}
]

})

kbuechl kbuechl · Accepted Answer · 2014-07-22T13:57:31

There are a few options for adjusting the layout

Use layout:'border in your parent Panel and then specify the region (North, East, South, West, or Center) for each item you want to move.
Use 'layout:'absolute' and then define the x and y coordinates for each item. See the Documentation here.
Use layout:'hbox' which is well defined here.

Alignment of elements in TabPanel

1 Answers