ext js grid/accordion에서 expand/collapse 버튼 사용자 정의

Question

ExtJs grid/accordion의 확장 (+)/축소 (-) 버튼을 사용자 정의 할 수있는 방법이 있습니까?

Answer 1

도구 아이콘으로 CSS를 재정 의하여 아이콘을 변경할 수 있습니다. 아코디언 패널에 클래스 이름을 추가하고이를 사용하여 도구 버튼에 스타일을 적용 할 수 있습니다.

샘플 코드 조각

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>