06. Accordion Layout

Esta distribución permite distribuir los elementos de un contenedor, de forma que sólo uno de ellos está desplegado, y los demás elementos están colapsados.

Aquí un ejemplo:

    <script type="text/javascript">
        Ext.onReady(function() {

            var item1 = new Ext.Panel({
                title: 'Accordion Item 1',
                html: 'Unod',
                cls:'empty'
            });

            var item2 = new Ext.Panel({
                title: 'Accordion Item 2',
                html: 'Dos',
                cls:'empty'
            });

            var item3 = new Ext.Panel({
                title: 'Accordion Item 3',
                html: 'Tres',
                cls:'empty'
            });

            var item4 = new Ext.Panel({
                title: 'Accordion Item 4',
                html: 'Cuatro',
                cls:'empty'
            });

            var item5 = new Ext.Panel({
                title: 'Accordion Item 5',
                html: 'Cinco',
                cls:'empty'
            });

            var viewport = new Ext.Viewport({
                layout:'accordion',
                layoutConfig:{animate:true},
                items:[item1, item2, item3, item4, item5]
            });
        });
    </script>

Al ejecutar la página, se ve así:

• Se ha establecido la propiedad 'layout' del contenedor, a 'accordion'.
• Se ha establecido la propiedad 'layoutConfig' con una estructura, que tiene como una de sus propiedades a 'animate', que debe establecerse a true si se quiere que el colapso sea animado.