Recently I tried ExtJs 4.0.2a. Here I am going to share a trick to print ExtJs grid. Concept is to open a new window. Render grid inside window and print grid.
Add a button in toolbar of grid panel. Call it a print button. Set handler for the button and add following code in handler. First of all open a new window.
var printDialog = window.open('', 'PrintPortfolioGrid');
Add some basic HTML to newly open a window. Most important thing is to add link to ExtJS core files and CSS so we can properly render grid.
var html = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"'
'"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">' +
'<html>' +
'<head>' +
'<title>Print Portfolio Grid</title>' +
'<ink rel="stylesheet" type="text/css" href="ext-4.0.2a/resources/css/ext-all.css" />' +
'<link rel="stylesheet" type="text/css" href="styles/Triskell.css" />' +
'<script type="text/javascript" src="ext-4.0.2a/ext-debug.js"></script>' +
'</head>' +
'<body></body>' +
'</html>';
printDialog.focus();
printDialog.document.write(html);
printDialog.document.close();
Now add some events to initialize document and Ext so that we can render grid.
printDialog.onload = function () {
printDialog.Ext.onReady(function () {
printDialog.Ext.create('Ext.grid.Panel', {
store: printDialog.Ext.create('Ext.data.Store', {
fields: ['Name','Cost'],
data: [
{ Name: 'IT Portfolio, Cost: '1500$'},
{ Name: 'Product Portfolio', Cost: '2500$'},
{ Name: 'Asset Portfolio', Cost: '4500$'},
{ Name: 'NPD Portfolio', Cost: '3500$'},
]
}),
renderTo: printDialog.Ext.getBody(),
columns: [
{ header: 'Name', dataIndex: 'Name', flex: 1 },
{ header: 'Cost', dataIndex: 'Cost', flex: 1 }
],
width: 723,
height: 500
});
printDialog.print();
});
}
That's it and it will open a print dialog.Select a required printer and it will print your grid.
