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

If you are using ExtJS 4.2, set

titlePosition:1

in header config to make title next to accordion expand/collapse icon.

Doc Link

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

header:{
  titlePosition:1
}

This work fine for me... :)

Answer 2

The only way i found out how to do this was to override the default css:

On the accordion header:

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

On the accordion toggle button:

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

Hope it helps!