ExtJS 4: Grid Printer Plugin

**loiane** · 7 Sep 2011 5:36 AM

Hi,

I ported GridPrinter plugin to ExtJS 4.
This plugin was originally written by Ed Spencer.

Code: https://github.com/loiane/extjs4-ux-gridprinter
Demo: http://loianegroner.com/extjs/exampl...x-gridprinter/
Blog post: http://loianegroner.com/2011/09/extj...printer-plugin

**crysfel** · 7 Sep 2011 9:11 AM

This is great, I was planing on porting this plugin to ext4 but you did it!

Thanks for share.

**zacware** · 8 Sep 2011 8:28 PM

Thank you! Really missed having this.

**foxmarco** · 9 Sep 2011 9:06 AM

but in case of paging?

**loiane** · 23 Sep 2011 3:56 AM

Originally Posted by foxmarco

but in case of paging?

The plugin will only print what the grid is displaying at the time.
To print all the records, you have to change the plugin and load all the records into the store, or you can create a server side solution.

**hschaefer123** · 29 Sep 2011 12:41 AM

Hi Loiane,
thanks for the migration.

I like to see that the code quality of migrated extensions is getting better and better and Ext 4 has the possibility to produce same quality with less code ;-)

Currently Grid Printer does not support TemplateColumns -> XTemplate Exception.

I added support this way

Code:

                    Ext.each(columns, function(column) {
                        if (column.dataIndex == key) {
                            // template column support
                            if (column instanceof Ext.grid.column.Template) {
                                convertedData[key] = column.tpl.apply(item.data);                            
                            } else {
                                convertedData[key] = column.renderer ? column.renderer(value) : value;
                            }
                        }
                    }, this);

Cheers Holger

**loiane** · 10 Oct 2011 2:47 PM

Thanks!

I will update the plugin code with these new fixes!

**parkcity** · 11 Oct 2011 1:41 AM

I am using chrome and the code doesn't print automatically. In chrome I get the notification.."Print Preview failed". The code works fine when printAutomatically is set to false.

**mfruizs2** · 14 Oct 2011 12:20 AM

First: Thx 4 ur great support, mates!

Second: For @parkcity, to delete this error, u need to erase or commented the windows internal command to close the windows, then, it will run nice again

Now, my question

I need to print all the grid, but not all the grid print on the current screen, else all data store. Then, how could I return all the storage on a "grid.panel" that is the parameter i need to ?

thx 4 ur time!

cya!

PS: sorry if i didnt explaned very well

**hschaefer123** · 14 Oct 2011 1:55 AM

A little addon to the htmlMarkup with table headers (THEAD) and table body (TBODY) tags will allow printing table head on each page (if printing large grids that are printed on different pages).

Concerning question printing large store, the grid prints the binded store. So make sure the store contains all data and you do not use filtering or paging (ex. paging plugin) or paging should be a very large value.

This solution should not be a genrall solution for printing very large data sets! In such a case you should generate print output on server side and maybe download it as PDF.

The plugin is thought as a quick and easy solution to print the visible grid part, including custom renderers, etc.

Currently all columns are printed, but it is also possible to filter hidden column, or prior print to hide some columns that contain html markup not needed to be printed in a later version.

Code:

            var htmlMarkup = [
                '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">',
                '<html>',
                  '<head>',
                    '<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />',
                    '<link href="' + this.stylesheetPath + '" rel="stylesheet" type="text/css" media="screen,print" />',
                    '<title>' + grid.title + '</title>',
                  '</head>',
                  '<body>',
                    '<table>',
                      '<thead>',
                      headings,
                      '</thead>',
                      '<tbody>',
                      '<tpl for=".">',
                        body,
                      '</tpl>',
                      '</tbody>',
                    '</table>',
                  '</body>',
                '</html>'           
            ];

ExtJS 4: Grid Printer Plugin

Thread Tools

Search Thread

Display

ExtJS 4: Grid Printer Plugin

ExtJS 4: Grid Printer Plugin

Adding Ext.grid.column.Template support

Adding Ext.grid.column.Template support

Tags for this Thread