javascript - Extjs Accordion Header - Move collapse button to left of header title

Question

I have accordion layout having collapse button on right side (this is the default behaviour). How can I change the collapse button position to left?

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，请设置

标题位置：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;
}

希望能帮助到你！