ExtJS 4: Grid Printer Plugin

**mfruizs2** · 14 Oct 2011 2:37 AM

Thx 4 the reply.

It's interesting ... How could i need to rewrite the code on the printer plugin to put the head on all the pages ? because with only adding <thead> and </thead> not do it.

thx again 4 ur help!

**hschaefer123** · 23 Oct 2011 11:35 PM

Hi mfruizs2,
i do not know if this works in all browsers as expected, but you are right.

You only need the addtional THEAD/TBODY markup to get this working in firefox.
This is standard html behavior.
I did not check this thing against all browsers because it is only additional markup (nice to have),

So if you browser did not cache the script and your table is printed on at least 2 pages
each page should have its own column description (headers) on top.

Cheers Holger

**mfruizs2** · 25 Oct 2011 6:54 AM

Ok thx 4 all. i'm thinking that i need to re-code the CSS to get it.

cya!

**craigsimons** · 24 Nov 2011 2:48 PM

Viewing source in Chrome will crash the browser. Firefox doesn't crash, but source is blank.

**venkateshns** · 28 Nov 2011 2:47 AM

HI All,
Can anybody tell me how to print a form panel ?

Regards,
Venkatesh

**rjsquire** · 3 Jan 2012 2:04 PM

Using the example from the distribution, I found that the css was not getting applied when printAutomatically is true. When it is false, the page never finishes loading. All the content is displayed, but the loading indicator of the browser is still moving.

To fix this, the stream opened to write to the document needs to be closed. One line is added to the plugin right after the data is written to the document.

Code:

win.document.write(html);
win.document.close(); // this line is new and closes the stream
if (this.printAutomatically){
    win.print();
    win.close();
}

Once that is in place, the printable view works perfectly whether or not printAutomatically is set.

**amanp** · 23 Jan 2012 12:59 AM

This plugin doesn't support for grid panels with grouped headers...

**caballero** · 22 Feb 2012 11:44 PM

god bless you hschaefer123

Your code snippet was a life saver.

Loraine, you mentioned that you would put his fix into the source. I highly recommend you do. I spent a good hour and a half trying to get this to work on multiple grids.

Great tool.

Thanks again.

**masoud_tamizy** · 23 Feb 2012 1:34 AM

very good plugin

**user ext** · 24 Feb 2012 8:22 AM

Originally Posted by amanp

This plugin doesn't support for grid panels with grouped headers...

This variant for grouped headers ( column group or nested headers) and grid grouping.

Code:

 	print: function (grid)
 	{
 		
 		var columns = grid.headerCt.getVisibleGridColumns(false);
 		//drop first empty column (when grid groupped)
 		if (columns[0].dataIndex == null && columns[0].items.length == 0) columns.shift();
 		//build a useable array of store data for the XTemplate
 		var data = [];
 		grid.store.data.each(function (item)
 		{
 			var convertedData = [];
 			//apply renderers from column model
 			for (var key in item.data)
 			{
 				var value = item.data[key];
 				Ext.each(columns, function (column)
 				{
 					if (column.dataIndex == key)
 					{
 						var colIndex = column.getIndex();
 						convertedData[key] = column.renderer ? column.renderer.call(grid, value, null, item, null, colIndex) : value;
 					}
 				}, this);
 			}
 			data.push(convertedData);
 		});
 
 		//create nested headers as html (not used headerTpl)
 		var nr = 0, rows = [[]];
 		var fn = function (item, index, all) 
 		{
 			if (item.dataIndex == null) 
 			{
 				var cols = item.items.items; 
 				if (cols.length > 0 && !item.hidden) 
 				{
 					rows[nr].push('<th colspan="' + cols.length + '"><div align="center">' + item.text + '</div></th>'); 
 					nr++; if (nr == rows.length){ rows[nr] = []; }
 					Ext.each(cols, fn); 
 					nr--;
 				}
 			}
 			else
 			{
 				if (!item.hidden) rows[nr].push('<th{0}>' + item.text + '</th>'); 
 			}
 		}
 		Ext.each(grid.columns, fn); 
 		Ext.each(rows, function (item, index, all) 
 		{
 			item.unshift('<tr>'); item.push('</tr>'); 
 			all[index] = Ext.String.format(item.join(''), ' rowspan="' + (all.length - index) + '"'); 
 		});
 		var headings = rows.join('');
 		var body = Ext.create('Ext.XTemplate', this.bodyTpl).apply(columns);
 
 		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>' + 'table: ' + grid.store.storeId + '</title>',
 				'</head>',
 				'<body>',
 				'<table>',
 					headings,
 					'<tpl for=".">',
 						body,
 					'</tpl>',
 				'</table>',
 				'</body>',
 			'</html>'
 		];
 
 		var html = Ext.create('Ext.XTemplate', htmlMarkup).apply(data);
 
 		//open up a new printing window, write to it, print it and close
 		var win = window.open('', 'printgrid');
 		win.document.write(html);
 		win.document.close();
 
 		if (this.printAutomatically)
 		{
 			win.print();
 			win.close();
 		}
 	},

ExtJS 4: Grid Printer Plugin

Thread Tools

Search Thread

Display

Don't view source in Chrome... bad things happen.

Don't view source in Chrome... bad things happen.

How to print a form panel

How to print a form panel

Strange loading issue in the printing window.

Strange loading issue in the printing window.

Grouped Headers

Grouped Headers

thanks

thanks

if grid rows aggregated into groups, If the columns can contain other columns

if grid rows aggregated into groups, If the columns can contain other columns

Tags for this Thread