ExtJS Ext.panel.Panel tools order

Question

I've got this panel. It shows tools icons in this order: gear, close, collapse. I'd like to get icons is this order: gear, collapse, close. I can't figure it out. When I put collapseFirst: true, then collapse is at the first position.

Here's an alternative link to the SenchFiddle

Ext.application({
    name : 'Fiddle',

    launch : function() {
        Ext.create('Ext.panel.Panel', {
            width : 500,
            height: 200,
            title : 'Panel',
            renderTo: Ext.getBody(),
            closable : true,
            collapsible : true,
            collapseFirst : false,
            tools: [{
                type : 'gear'
            }],
            initTools: function() {
                var me = this,
                    tools = me.tools,
                    i, tool;
    
                me.tools = [];
                for (i = tools && tools.length; i; ) {
                    --i;
                    me.tools[i] = tool = tools[i];
                    tool.toolOwner = me;
                }
    
                // Add a collapse tool unless configured to not show a collapse tool
                // or to not even show a header.
                if (me.collapsible && !(me.hideCollapseTool || me.header === false || me.preventHeader)) {
                    if (Ext.getVersion().major == '4') {
                        me.collapseDirection = me.collapseDirection || me.headerPosition ||     'top';
                        me.collapseTool = me.expandTool = Ext.widget({
                            xtype: 'tool',
                            handler: me.toggleCollapse,
                            scope: me
                        });
    
                        me.updateCollapseTool();
                        // Prepend collapse tool is configured to do so.
                        if (me.collapseFirst) {
                            me.tools.unshift(me.collapseTool);
                        }
                    } else {
                        me.updateCollapseTool();
                        // Prepend collapse tool is configured to do so.
                        if (me.collapseFirst) {
                            me.tools.unshift(me.collapseTool);
                        }
                    }
                }
    
                if (me.pinnable) {
                    me.initPinnable();
                }
    
                // Add subclass-specific tools.
                me.addTools();
                // Append collapse tool if needed.
                if (me.collapseTool && !me.collapseFirst) {
                    me.addTool(me.collapseTool);
                }
                // Make Panel closable.
                if (me.closable) {
                    me.addClsWithUI('closable');
                    me.addTool({
                        xtype : 'tool',
                        type: 'close',
                        scope: me,
                        handler: me.close
                    });
                }
            }
    	});
    }
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/resources/css/ext-all-neptune.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/ext-all-debug.js"></script>

Thanks anyone for help :)

Answer 1

EDIT: Found that overriding the initTools method is a better solutions for this

EDIT 2: Supports both ExtJS 4.2 and ExtJS 5.x

Ext.create('Ext.panel.Panel', {
        width : 500,
        height: 500,
        title : 'Panel',
        renderTo: Ext.getBody(),
        closable : true,
        collapsible : true,
        collapseFirst : false,
        tools: [{
            type : 'gear'
        }],
        initTools: function() {
            var me = this,
                tools = me.tools,
                i, tool;

            me.tools = [];
            for (i = tools && tools.length; i; ) {
                --i;
                me.tools[i] = tool = tools[i];
                tool.toolOwner = me;
            }

            // Add a collapse tool unless configured to not show a collapse tool
            // or to not even show a header.
            if (me.collapsible && !(me.hideCollapseTool || me.header === false || me.preventHeader)) {
                if (Ext.getVersion().major == '4') {
                    me.collapseDirection = me.collapseDirection || me.headerPosition ||     'top';
                    me.collapseTool = me.expandTool = Ext.widget({
                        xtype: 'tool',
                        handler: me.toggleCollapse,
                        scope: me
                    });

                    me.updateCollapseTool();
                    // Prepend collapse tool is configured to do so.
                    if (me.collapseFirst) {
                        me.tools.unshift(me.collapseTool);
                    }
                } else {
                    me.updateCollapseTool();
                    // Prepend collapse tool is configured to do so.
                    if (me.collapseFirst) {
                        me.tools.unshift(me.collapseTool);
                    }
                }
            }

            if (me.pinnable) {
                me.initPinnable();
            }

            // Add subclass-specific tools.
            me.addTools();
            // Append collapse tool if needed.
            if (me.collapseTool && !me.collapseFirst) {
                me.addTool(me.collapseTool);
            }
            // Make Panel closable.
            if (me.closable) {
                me.addClsWithUI('closable');
                me.addTool({
                    xtype : 'tool',
                    type: 'close',
                    scope: me,
                    handler: me.close
                });
            }

        }
    });