ExtJS 4.2 render components bigger than body for printing - extjs

Question

I am creating a reporting system and i am having a bit trouble with my printing functionallity.
My plan was to place a div in my body element in the index.html
<div class="print" id="printcontainer"></div>
with the following css
#printcontainer{
z-index: -50;
position: absolute;
top: 0;
left: 0;
overflow: visible;
}
Then on print i'll render all report panels in my printcontainer somthing like this:
for (var reportCfg in reports) {
reportCfg.renderTo = 'printcontainer';
createReportPanel(reportCfg);
}
so far so good. If the Browser window is big enough it all works fine. But on a small screen or if you make your browser window smaller the panels are not rendered big enough and the reports are cropped. It only renders the width which the body element has. which is the size of the browser window.
I know i could just add a width to my reportCfg (so my panel gets a fixed width). The problem is these reports all could have different widths depending on their columns.
Is there a solution i could render them bigger than the body width ???
For now i came up with the following hack though im not very happy about it.
I am overwriting the afterRender fn of my report panel and then i check if the grid header has a bigger scrollwidth than the width of the panel.
afterRender: function() {
this.callParent(arguments);
//hack for printing page so panel gets rendered big enough
if (this is panel for printing) {
Ext.resumeLayouts(true);
var header = this.down('[id^="gridpanel"] [id^="headercontainer"]');
if (header && header.el.dom.scrollWidth > this.getWidth()) {
this.setWidth(header.el.dom.scrollWidth);
}
}
},
Is there a better solution to accomplish such a thing? Imo there must be a better solution.
If you need more information, dont hesitate to ask.