05. Table Layout

En esta distribución podemos ordenas los elementos de un contenedor como si fuera una tabla html. El ancho de las columnas y la altura de las filas, depende del ancho y alto de los elementos que están dentro de cada celda. Es posible utilizar las propiedades rowspan y colspan, tal como se hacen en las tablas html.

Aquí un código de ejemplo:

    <style type="text/css">
        #main-panel td {
            padding:5px;
        }
    </style>
    <script type="text/javascript">
        Ext.onReady(function() {
            var panel = new Ext.Panel({
                id:'main-panel',
                baseCls:'x-plain',
                renderTo: Ext.getBody(),
                layout:'table',
                layoutConfig: {columns:3},
                // applied to child components
                defaults: {frame:true, width:200, height: 200},
                items:[{
                    title:'Item 1'
                },{
                    title:'Item 2'
                },{
                    title:'Item 3'
                },{
                    title:'Item 4',
                    width:410,
                    colspan:2
                },{
                    title:'Item 5'
                },{
                    title:'Item 6'
                },{
                    title:'Item 7',
                    width:410,
                    colspan:2
                },{
                    title:'Item 8'
                }]
            });
        });
    </script>

• Notar que no se ha utilizado el objeto Panel envés de Viewport, al parecer Panel genera una tabla real, a la cual se puede aplicar la hoja de estilos que hace referencia a un tag de celda de tabla (td).
• Se ha establecido la propiedad 'layout' a 'table'.
• Se ha establecido la propiedad 'layoutConfig' con una estructura que indica que debe haber 3 columnas.
• Hay una propiedad llamada 'renderTo' que tiene el valor Ext.getBody() que no lo he podido interpretar, pero que parece ser necesario para que funcione esta distribución.
• La propiedad 'default' del contenedor sirve para establecer las propiedades por defecto que van a tener los elementos que contiene. Se le pasa una estructura con los valores de las propiedades.
• En los elementos (ítems) podemos ver como se utiliza la propiedad 'colspan' para que el elemento abarque otras celdas. También se puede utilizar 'rowspan'.

Aquí se puede ver el resultado: