We can show accordion panel in the ExtJS window. We can call accordion as collapsible menu that can be expand or collapse on clicking header.
Required Libraries :
- ext-all.css
- ext-base.js
- ext-all.js
Showing Accordion Panel to a Window in ExtJS ?
<html> <head> <title>Hello Accordion</title> <link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css"/> <script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="../extjs/ext-all.js"></script> </head> <body> <script type="text/javascript"> Ext.onReady(function() { var panel1 = { xtype : 'panel', title : 'Customer Information', html : 'Customer Information Goes Here' } var panel2 = { xtype : 'panel', title : 'Contact Information', html : 'Contact Information Goes Here' } var panel3 = { xtype : 'panel', title : 'Business Information', html : 'Business Information Goes Here' } new Ext.Window({ width : 400, height : 400, title : 'Customer : Accordion Screen', layout : 'accordion', border : false, layoutConfig : { animate : true }, items : [panel1,panel2,panel3] }).show(); }); </script> </body> </html>
Explanation : Accordion Window in ExtJS
Firstly Create Different panels to be shown in the accordion inside the onready event of ExtJS.
var panel1 = {
xtype : 'panel',
title : 'Customer Information',
html : 'Customer Information Goes Here'
}
Now After Creating Panel we need to create window with specified properties. In order to create accordion don’t forgot to set layout property as “accordion“.
layout : 'accordion',
Complete Window Code :
new Ext.Window({ width : 400, height : 400, title : 'Customer : Accordion Screen', layout : 'accordion', border : false, layoutConfig : { animate : true }, items : [panel1,panel2,panel3] }).show();
Create list of panels and set list to “items” property.
