有没有办法在ExtJs grid / accordion中自定义展开(+)/折叠( - )按钮。
答案 0 :(得分:5)
您可以通过覆盖工具图标的CSS来更改图标。您可以将类名添加到accordion面板,并使用该样式将样式应用于工具按钮。
示例代码段
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>