How to rotate triangle collapse icon in Ext Js panel?

Question

Is there a way to rotate the collapse icon in a panel ( http://i.imgur.com/2ZvKd.png )? Since the direction is a bit misleading as the panel collapses in a direction opposite to that what the icon indicates.

   defaults: {
            collapsible: true,
            animFloat: true,
            autoHide: true,
            cmargins: '5 5 5 5'
        },
        items:
        [{
            xtype: 'createreportview',
            bodyStyle:{ padding: '10px'},
            minHeight:280,
            flex: 0.40
         },
         {
             xtype: 'splitter',
             collapseTarget:'prev'
         },
         {
             xtype: 'resultsview',
             flex: 0.60
        }]
}

There are 2 panels, the collapse icon on the 2nd panel (resultsview) is the one shown in the image posted above and is the one im trying to fix.

Answer 1

You could just change the background-position of the image. Here is the sprite of all the tool images: http://dev.sencha.com/deploy/ext-4.0.7-gpl/resources/themes/images/default/tools/tool-sprites.gif

if you go to http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/layout/border.html and inspect the arrow elements (up and down arrows on the panels you can see the background-position values set in the css.

For position of down arrows:

x-tool-expand-top, .x-tool-collapse-top {
    background-position: 0 -210px;
}

Position of up arrows:

.x-tool-over .x-tool-expand-bottom, .x-tool-over .x-tool-collapse-bottom {
    background-position: -15px -195px;
}

You could update the css (using a stylesheet that loads after ext's css file) to the following to switch them (just switch background-positions):

.x-tool-expand-top, .x-tool-collapse-top {
    background-position: -15px -195px;
}

.x-tool-over .x-tool-expand-bottom, .x-tool-over .x-tool-collapse-bottom {
    background-position: 0 -210px;
}

Answer 2

What's you layout for the parent container? I think you can just use layout: border, and specify region: south for you bottom panel and it will have down arrow.

As for trying to fix your exact sample - try to move collapsible: true from defaults inside bottom panel definition.