Tuesday, July 26, 2011

ExtJs 4.0.2 - Print Grid

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.



1 comment:

  1. Cool your example but I'm trying to implement and I can not. You have to download it?

    Thanks a lot
    Luciano

    ReplyDelete