Printing grids with Ext JS

July 26, 2009 by Ed Spencer · 18 Comments 

Grids are one of the most widely used components in Ext JS, and often represent data that the user would like to print. As the grid is usually part of a wider application, simply printing the page isn’t often a good solution.

You could attach a stylesheet with media=”print”, which hides all of the other items on the page, though this is rather application-specific, and a pain to update. It would be far better to have a reusable way of printing the data from any grid.

The way I went about this was to open up a new window, build a table containing the grid data into the new window, then print it and close. It’s actually pretty simple, and with a bit of CSS we can even get the printable view looking like it does in the grid.

Here’s how you use it (this is a slightly modified version of the Array Grid Example):

var grid = new Ext.grid.GridPanel({
  store  : store,
  columns: [
      {header: "Company",      width: 160, dataIndex: 'company'},
      {header: "Price",        width: 75,  dataIndex: 'price', renderer: 'usMoney'},
      {header: "Change",       width: 75,  dataIndex: 'change'},
      {header: "% Change",     width: 75,  dataIndex: 'pctChange'}
      {header: "Last Updated", width: 85,  dataIndex: 'lastChange', renderer: Ext.util.Format.dateRenderer('m/d/Y')}
  ],
  title:'Array Grid',
  tbar : [
    {
      text   : 'Print',
      iconCls: 'print',
      handler: function() {
        Ext.ux.GridPrinter.print(grid);
      }
    }
  ]
});

So we’ve just set up a simple grid with a print button in the top toolbar. The button just calls Ext.ux.GridPrinter.print, which does all the rest. The full source code that this example was based upon can be found at http://extjs.com/deploy/dev/examples/grid/array-grid.js.

The source for the extension itself is pretty simple (download it here):

If you look at the source above you’ll see it includes a ‘print.css’ stylesheet, which can be used to style the printable markup. The GridPrinter expects this stylesheet to be available at /stylesheets/print.css, but this is easy to change:

  //add this before you call Ext.ux.GridPrinter.print
  Ext.ux.GridPrinter.stylesheetPath = '/some/other/path/gridPrint.css';

Finally, here is some CSS I’ve used to achieve a grid-like display on the printable page:

html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td{margin:0;padding:0;}
img,body,html{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul {list-style:none;}caption,th {text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;}q:before,q:after{content:'';}

table {
  width: 100%;
  text-align: left;
  font-size: 11px;
  font-family: arial;
  border-collapse: collapse;
}

table th {
  padding: 4px 3px 4px 5px;
  border: 1px solid #d0d0d0;
  border-left-color: #eee;
  background-color: #ededed;
}

table td {
  padding: 4px 3px 4px 5px;
  border-style: none solid solid;
  border-width: 1px;
  border-color: #ededed;
}

This technique could easily be adapted to print any component that uses a store – DataViews, ComboBoxes, Charts – whatever. It just requires changing the generated markup and stylesheet.

Related posts

About Ed Spencer
Geek

Comments

18 Responses to “Printing grids with Ext JS”
  1. Anonymous says:

    Nice work Ed.

  2. Lloyd K says:

    Excellent work and happy birthday!

  3. Andrew says:

    Thanks for this extremely useful bit of code!

  4. Loiane says:

    Excellent work!
    I was looking for something like this and it is perfect!

  5. Night says:

    Excellent work! Спасибо, подрочил!

  6. Anonymous says:

    Thanks for the code , but i get the following error

    grid.getColumnModel() is not a function

    How can i fix this ? thanks in advance

  7. Dan Ellison says:

    This script works flawlessly using Firefox 3 – Explorer 7 however gives me a new window for the briefest time and the the new window simply vanishes and no print dialogue is ever presented. Tried setting the options for a “open popups in new tab” but didn’t change anything. Any ideas what is happening (other than good old microsoft strikes again….?) Thanks a million.

  8. Hee says:

    I need to pass some parameters over to print. How can I do so? Thank you.

  9. Dan says:

    This script works great, however I noticed a subtle bug in firefox if you would want to open a print view that does not print the document immediately. (ie remove calls to win.print() and win.close()) Firefox will continue to “loading” the page indefinitely. In order to correct add:


    win.document.write(html);
    win.document.close();

  10. Ahmad says:

    The printer friendly table always shows all the columns in the store, even though if they were hidden, how can I show only the visible columns?

  11. Ahmad says:

    @Dan
    If you want the new window/tab to not close immediately then you can remove the following line:
    win.close()

  12. kmil0cv says:

    Excellent work!, Thanks for the code.

    but what about if the grid has a paging toolbar ?
    this scripts only prints the data in the active page.
    any idea?

    maybe reloading the store without any limit,start parameter ??

    cheers!

  13. Alan says:

    For those that were having trouble with IE, I think the following changes fix this issue.

    1. Move the print trigger to the onload():
    ”,
    remove:
    win.print();

    2. Change the:
    win.close();
    to
    win.document.close();
    as suggested by another commenter.

    win.print() doesn’t seem to work in IE for a dynamically created document, and the win.document.close() is essential for the onLoad event to work in IE. This solution does not end up automatically closing the window after printing, but I prefer that behavior.

  14. Alan says:

    I’m not sure what happened to the onLoad line in my earlier comment, basically you want to call window.print() from the body tag of the generated HTML.

  15. Ed Spencer says:

    I’ve updated the Github gist with the window.document.close() as suggested by Dan and Alan. I suggest you check out Ext.ux.Printer instead though as it’s a more comprehensive plugin that can be applied to any component (see http://edspencer.net/2009/07/extuxprinter-printing-for-any-ext.html)

  16. Ben McLendon says:

    I’ve tried both of your grid printing solutions and I have the same issue with both. I get the grid headers but no rows on the printout. I must be missing something. Thanks!!!

  17. Luiz Feliph says:

    HI,
    Nice work! Just a thing: in the link to the source code, this:
    ” + grid.title + ”,
    is this:
    ” + grid.getTitle() + ”,

    no big deal =)

Trackbacks

Check out what others are saying about this post...
  1. [...] gera uma página em HTML apenas com as informações do Grid. Porém com uma diferença: o GridPrinter é um plugin Third Party (de terceiros) para o ExtJS, ou seja, não preciso fazer uma requisição ao servidor para [...]



Speak Your Mind

Tell us what you're thinking...
and oh, if you want a pic to show with your comment, go get a gravatar!