Customize the expand/ collapse button in ext js grid/ accordion

Question

Is there any way to customise the expand(+)/ collapse(-) buttons in ExtJs grid/ accordion.

Answer 1

You can change the icons by overriding the CSS for tool icons. You can add a class name to the accordion panel and apply styles to the tool buttons using that.

Sample Code Snippet

Ext.create('Ext.panel.Panel', {
  title: 'Accordion Layout',
  width: 200,
  height: 300,
  layout: {
    type: 'accordion'
  },
  cls: 'my-accordion',
  items: [{
    title: 'Panel 1',
    html: 'Panel content!'
  }, {
    title: 'Panel 2',
    html: 'Panel content!',
    collapsed: true
  }, {
    title: 'Panel 3',
    html: 'Panel content!',
    collapsed: true
  }],
  renderTo: Ext.get("container")
});

body {
  padding: 0px;
}

.my-accordion .x-accordion-hd .x-tool-over .x-tool-collapse-top,
.my-accordion .x-accordion-hd .x-tool-over .x-tool-collapse-bottom,
.my-accordion .x-accordion-hd .x-tool-collapse-top,
.my-accordion .x-accordion-hd .x-tool-collapse-bottom {
  background-position: 0 -570px;
}

.my-accordion .x-accordion-hd .x-tool-over .x-tool-expand-top,
.my-accordion .x-accordion-hd .x-tool-over .x-tool-expand-bottom,
.my-accordion .x-accordion-hd .x-tool-expand-top,
.my-accordion .x-accordion-hd .x-tool-expand-bottom {
  background-position: 0 525px;
}

<script type="text/javascript" src="http://cdn.sencha.com/ext/gpl/4.2.0/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.sencha.io/ext-4.2.0-gpl/resources/css/ext-all.css">
<div id="container">

</div>