Accordion Header - Move collapse button to left of header title

I am using an accordion layout to place two grid panels above each other and are on the right side of the page. Our UX designer wants the collapse/expand button to be at the left of the header instead of the right because he feels it is not intuitive to the user. I have attempted to override the accordion layout on render and modify the CSS, however the styles are being applied at the element level and I haven't been able to move the button.

I am using ExtJs 4.1 beta 2 and using in Firefox 11. It is a company wrapper of the code, which is limiting the flexibility.

I have been trying to apply this to grid panels, I will try basic panels to see if that will work. Then maybe resort to wrapping a panel around the grid panels. Or for now I will hold off until they upgrade their release to the non-beta version.

This solved it for me, so I thought I would share.

I tried the code that was posted before but it didn't work for me, probably because the version of Extjs that we use is 3.2. So if anybody using the same version is looking for the answer, thought I would share it.