Extjs Accordion Header - 將摺疊按鈕移動到標題標題左側

Question

我在右側有摺疊按鈕的手風琴佈局（這是默認行爲）。如何將摺疊按鈕位置更改爲左側？

Ext.create('Ext.panel.Panel', { 
    title: 'Accordion Layout', 
    layout: { 
     // layout-specific configs go here 
     type: 'accordion', 
     titleCollapse: false, 
     animate: true, 
     activeOnTop: true 
    }, 
    items: [{ 
     title: 'Panel 1', 
     html: 'Panel content!', 
    },{ 
     title: 'Panel 2', 
     html: 'Panel content!' 
    },{ 
     title: 'Panel 3', 
     html: 'Panel content!' 
    }], 
    renderTo: Ext.getBody() 
}); 

Please help me out. 

Your help is appreciated!! Thanks in advance. 

Answer 1

如果您正在使用ExtJS的4.2，設置

titlePosition：1

在頭配置，使標題旁邊的手風琴展開/摺疊圖標。

文件鏈接

http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.panel.Header-cfg-titlePosition

header:{ 
    titlePosition:1 
} 

這項工作對我很好... :)

Answer 2

我發現瞭如何做到這一點的唯一方法是重寫默認CSS：

在手風琴標題：

.x-accordion-hd .x-panel-header-text-container { 
     right: 0 !important; 
     left: auto !important; 
} 

在手風琴切換按鈕：

.x-panel-header-default-horizontal .x-tool-after-title { 
    left: 0 !important; 
    right: auto !important; 
} 

希望它有幫助！