Customize expand / collapse button in ext js grid / accordion
Is there a way to customize expand (+) / collapse (-) buttons in ExtJs grid / harmonic.
+3
Sree Nath
source
to share
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
Gilsha
source
to share