ExtJS 4: Grid Printer Plugin

**loiane** · 11 Sep 2012 8:28 AM

Originally Posted by mvorpagel

Hi Loiane,
It doesn't look like source code is available on github anymore? Has it been officially added to ExtJS release, and maybe I'm just missing it?

Thanks!

Hi, the code is still on github.

https://github.com/loiane/extjs4-ux-gridprinter

**jonasby** · 18 Sep 2012 5:00 AM

I noticed your example page uses 4.0.2 which doesn't have Ext.String.createVarName

You might want to use 4.1.1

Great plugin, thanks for keeping it updated!

**loiane** · 24 Sep 2012 10:53 AM

As requested, added support to Grid Row Numbered plugin.

https://github.com/loiane/extjs4-ux-gridprinter

Will continue working to improve the plugin!

**blackpig** · 26 Sep 2012 3:23 AM

Hi,
I've tried to use your plugin in my project and works fine (thanks), but i needed also other feature than printing only list. I'm musing plugins like groupping, summaries, etc. Sometimes client need to print what he can see on the screen - ex. collapsed groups with summaries etc... I found a simple solution for this problem, by cutting table that is scrolled in the grid, using extjs-all.css and optional own css... I've added my method to your class and here is a code:

PHP Code:


        printGroups:function (grid){
            var html = jQuery('#'+grid.id+' .x-grid-table:first').html();
            html = 
                '<!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="./libraries/ExtJS-4.0.7/resources/css/ext-all.css" rel="stylesheet" type="text/css" />'+
                    '<link href="' + this.stylesheetPathGroups + '" rel="stylesheet" type="text/css" />'+
                    '<title>' + grid.title + '</title>'+
                  '</head>'+
                  '<body ><table>'+
                  html+
                  '</table></body>'+
                '</html>';
            var win = window.open('', 'printgridGroups');
            win.document.open();
            win.document.write(html);
            win.document.close();
            if (this.printAutomatically){
                win.print();
            }
        },

Using jQuery here, but may be replaced with ExtJS.
Example image:

print.png

You can also get column headers if needed and insert in generated template

PHP Code:


var headers = jQuery('#'+grid.id+' .x-grid-header-ct').html();

**loiane** · 26 Sep 2012 10:00 AM

Thanks for the contribution blackpig!

You you want to you can make a pull request into the repository and add your credits for this code! This way everyone else will be able to use your code as well!

**Felipe-BR** · 4 Oct 2012 6:21 AM

Olá a todos! Hey everyone!

I found a bug when the columns name are numbers. Ie.:
Encontrei um bug quando o nome da coluna são números. Por exemplo:

bug.png

Printing is not rendered. Can you help me?
A impressão não é renderizada. Vocês podem me ajudar?

Code:

"metaData": {
        "root": "empresas",
        "fields": [{
            "type": "string",
            "name": "ano2008",
            "mapping": "indicadores.ano2008.quantidadeProcesso",
            "defaultValue": "undefined"
        }, {
            "type": "string",
            "name": "ano2009",
            "mapping": "indicadores.ano2009.quantidadeProcesso",
            "defaultValue": "undefined"
        }, {
            "type": "string",
            "name": "ano2010",
            "mapping": "indicadores.ano2010.quantidadeProcesso",
            "defaultValue": "undefined"
        }, {
            "type": "string",
            "name": "ano2011",
            "mapping": "indicadores.ano2011.quantidadeProcesso",
            "defaultValue": "undefined"
        }, {
            "type": "string",
            "name": "ano2012",
            "mapping": "indicadores.ano2012.quantidadeProcesso",
            "defaultValue": "undefined"
        }, {
            "type": "int",
            "name": "soma"
        }],
        "colunas": [{
            "width": 80,
            "renderer": Ext.util.Format.numberRenderer('0,000'),
            "align": "right",
            "cls": "coluna-grid-center",
            "header": "2008",
            "sortable": true,
            "id": "id2008",
            "dataIndex": "ano2008"
        }, {
            "width": 80,
            "renderer": Ext.util.Format.numberRenderer('0,000'),
            "align": "right",
            "cls": "coluna-grid-center",
            "header": "2009",
            "sortable": true,
            "id": "id2009",
            "dataIndex": "ano2009"
        }, {
            "width": 80,
            "renderer": Ext.util.Format.numberRenderer('0,000'),
            "align": "right",
            "cls": "coluna-grid-center",
            "header": "2010",
            "sortable": true,
            "id": "id2010",
            "dataIndex": "ano2010"
        }, {
            "width": 80,
            "renderer": Ext.util.Format.numberRenderer('0,000'),
            "align": "right",
            "cls": "coluna-grid-center",
            "header": "2011",
            "sortable": true,
            "id": "id2011",
            "dataIndex": "ano2011"
        }, {
            "width": 80,
            "renderer": Ext.util.Format.numberRenderer('0,000'),
            "align": "right",
            "cls": "coluna-grid-center",
            "header": "2012",
            "sortable": true,
            "id": "id2012",
            "dataIndex": "ano2012"
        }, {
            "width": 74,
            "renderer": Ext.util.Format.numberRenderer('0,000'),
            "align": "right",
            "cls": "coluna-grid-center",
            "header": "Soma",
            "sortable": true,
            "id": "idsoma",
            "dataIndex": "soma"
        }]
    }

**iplanit** · 8 Oct 2012 2:03 AM

I put the plugin into a Grid in my Sencha Architect project and I get the following error:

Code:

Uncaught TypeError: Cannot read property 'columns' of undefined

The grid has headers, but otherwise is a regular Grid.

Code:

print: function(grid) { 
            //We generate an XTemplate here by using 2 intermediary XTemplates - one to create the header, 
            //the other to create the body (see the escaped {} below) 
            var columns = []; 
            //account for grouped columns 
            Ext.each(grid.columns, function(c) {  <-- error
                if(c.items.length > 0) { 
                    columns = columns.concat(c.items.items); 
                } else { 
                    columns.push(c); 
                } 
            });

**iplanit** · 8 Oct 2012 2:07 AM

It is working, I was using a wrong reference (Ext.getCmp).

Fixing it makes the printing table renders.

Thanks.

**loiane** · 8 Oct 2012 1:12 PM

Originally Posted by Felipe-BR

Olá a todos! Hey everyone!

I found a bug when the columns name are numbers. Ie.:
Encontrei um bug quando o nome da coluna são números. Por exemplo:

Thanks for reporting the bug. Will try to reproduce and fix it.

**loiane** · 8 Oct 2012 2:16 PM

Added Sencha Architect example - in case anyone wants to use it with SA2:

https://github.com/loiane/extjs4-ux-gridprinter

ExtJS 4: Grid Printer Plugin

Thread Tools

Search Thread

Display

added support to Grid Row Numbered plugin

added support to Grid Row Numbered plugin

Printing grid with summaries, groups and other plugins

Printing grid with summaries, groups and other plugins

When Name of Columns are Numbers

When Name of Columns are Numbers

'columns' of undefined

'columns' of undefined

Added Sencha Architect Example

Added Sencha Architect Example

Tags for this Thread