Docking o acoplamiento

Todos los layouts tienen la capacidad de acoplar elementos "adicionales" de forma fija en cualquiera de sus laterales. Al acoplar un elemento el resto de contenido del layout será redimensionado para adaptarse. Las posiciones en las que se puede acoplar un elemento son: top, right, bottom, o left.

Es importante notar que los elementos acoplados son "adicionales" al contenido del layout, es decir, si por ejemplo acoplamos un elemento a un contenedor con un layout tipo hbox, el elemento acoplado no seguirá la alineación horizontal, sino que se pondrá en la posición que se especifique con docked de entre la lista de posiciones permitidas.

En la imagen superior tenemos un layout tipo hbox con dos columnas y un elemento acoplado en la parte superior. A continuación se incluye el código para crear una disposición de este tipo:

Ext.create('Ext.Container', {
    fullscreen: true,
    layout: 'hbox',
    items: [
        {
            docked: 'top',
            xtype: 'panel',
            height: 20,
            html: 'Elemento acoplado en la parte superior.'
        },
        {
            xtype: 'panel',
            html: 'Columna izquierda.',
            flex: 1
        },
        {
            xtype: 'panel',
            html: 'Columna derecha.',
            flex: 2
        }
    ]
});

En el ejemplo se ha utilizado la característica docked para acoplar un panel, pero es mucho más común su utilización con herramientas tipo toolbar o titlebar.

Podemos acoplar tantos elementos como queramos, los cuales se irán añadiendo en el mismo orden en el que se asignen.