Layout tipo hbox

Si queremos que los elementos en un contenedor se dispongan de forma horizontal podemos utilizar el layout tipo hbox.

Además, para especificar el espacio que han de ocupar los componentes dentro del contenedor podemos utilizar la propiedad flex, la cual indica la proporción de espacio que ocupará un componente. Al indicar el espaciado de una serie de componentes con flex no es necesario que sumen 100, sino que se sumará el total de las cantidades y ese será el 100% del espacio. Por ejemplo, para conseguir una columna que ocupe 1/3 y otra de 2/3 especificaríamos los siguientes valores para la propiedad flex:

Para conseguir una disposición como la de la imagen tendríamos que indicar el layout tipo hbox al contenedor padre y establecer el atributo flex de cada hijo de la forma:

Ext.create('Ext.Container', {
    fullscreen: true,
    layout: 'hbox',
    items: [
        {
            xtype: 'panel',
            html: 'Columna que ocupa 1/3 del ancho.',
            flex: 1,
            style: 'background-color: #5E99CC;'
        },
        {
            xtype: 'panel',
            html: 'Columna que ocupa 2/3 del ancho.',
            flex: 2,
            style: 'background-color: #759E60;'
        }
    ]
});