自定义ext js grid/accordion中的展开/折叠按钮

Question

有没有办法在ExtJs grid/accordion中自定义展开(+)/折叠( - )按钮.

Answer 1

您可以通过覆盖工具图标的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>