Wednesday, July 1, 2015

ExtJs - Accordion Layout


  • Extjs provides the layout property to achieve the accordion Menu.
  • Defining layout as Accordion and adding elements is enough to make accordion menu.
  • There  is no extra configuration for accordion menu.

            {
            id: 'accordion-panel',
            title: Astute Accordion Layout',
            layout: 'accordion',
            bodyStyle: 'background-color:#DFE8F6', 
            defaults: {bodyStyle: 'padding:15px'},
            items: [{
                title: 'Astute Introduction',
                tools: [{type:'gear'},{type:'refresh'}],
                html: '<p>Here is some accordion content.  Click on one of the other bars below for more.</p>'
            },{
                title: 'Astute Basic Content',
                html: '<br /><br /><p>More content.  Open the third panel for a customized look and feel example.</p>',
                items: {
                    xtype: 'button',
                    text: 'Show Next Panel'
                }
            },{
                id: 'acc-custom',
                title: 'Astute Custom Html Panel ',
                html: '<p>HTML Content</p>'
            }]
        }

No comments: