Customize expand / collapse button in ext js grid / accordion
1 answer
You can change icons by overriding CSS icons for tools. You can add the class name to the accordion panel and apply styles to the instrument 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>
+5
source to share