ExtJs Accordion Panel

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 :

  1. ext-all.css
  2. ext-base.js
  3. 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.