title: Printing ExtJS charts with @media print
body: <p>I have a printing solution for ExtJS objects that seems to work great for everything except for charts.</p>
  
  <p>I've been using <code>@media print</code> CSS tip to create a "printing" div below my viewport (so it is not seen on screen, but it is the only item that is printed when a user clicks the print button). </p>
  
  <p>I do this so that I can control the proportionate sizing of the object so that it fits on the page nicely and so that I can remove "non-printing" elements like toolbars. When I want to print an ExtJS object from my app I add it to this "printing" div and then call <code>document.print</code>.</p>
  
  <p>The CSS for the div looks like this:</p>
  
  <pre><code>@media print {
      @page {size: landscape}
      body * {
        visibility: hidden;
      }
      .printer, .printer * {
        visibility: visible;
      }
      .printer {
        overflow: visible;
        position: absolute;
        left: 0;
        top: 0;
      }
  }
  </code></pre>
  
  <p>This has been working fine for grids and forms and other ExtJS objects. </p>
  
  <p>Now I have to set it up to print some charts but I get a "Layout run failure" error whenever I add the charts to my printer div - the chart does not get created at all. I am pretty sure that this is because the printer div is not actually seen on the screen, and the chart lays itself out based on how it is seen.</p>
  
  <p>Other elements (like grids and forms) do not seem to care if they are visible on the screen to do a layout, so I was wondering is there any way to override this requirement for a chart object? Or is this inextricably buried in the chart code? It would be the ideal handling for me because I would not have to change around my printing mechanism.</p>
  
  <p>Does anyone know if this is possible?</p>
  
  <p>I could create the printable versions of charts inside of a proportionately sized <code>Ext.window.Window</code> object instead that also has my <code>printer</code> class. It would be visible while the layout occurs (about a second) and then get hidden right after I call <code>document.print</code> but obviously that isn't as transparent.</p>
  
  <p>@EvanTrimboli this is the root problem I was trying to handle with <a href="https://stackoverflow.com/questions/11533769/understanding-layout-run-failure-error-logging">that other question</a>.</p>