How to rotate triangle collapse icon in Ext Js panel?

Is there a way to rotate the collapse icon in a panel ( https://i.sstatic.net/ydGi7.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.

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;
}