Grouped Grid Printer

[kmanuel@entausa.com]

I couldn't find a print function for grouped grids, so I made one. This may not be (isn't) the most elegant or efficient way to go about this, but I managed to make it work with Ext 4.0.7 and 4.1.0. I only have done initial testing in Chrome and FF and it suits our needs. I hope someone else finds it useful.

Printer for Grouped grids with or without summary totals.
Will open a new window with the results which can be printed by the browser.
Preserves hidden columns, widths, column order, and collapse status.

GroupedPrinter.txt

[Candeloro]

I am testing your code
this is my view for grid

Ext.define('LayoutTest.view.ElencoConsegneRitiri', {
    extend: 'Ext.grid.Panel',
    alias:    'widget.elencoconsegneritiri',
    
    id:'gridAgendeConsegneRitiri',
    title : 'Agende',
    multiSelect: true,
    selType: 'rowmodel',
    plugins: [
                  Ext.create('Ext.grid.plugin.RowEditing', {
                    saveBtnText : 'Salva riga',
                    cancelBtnText : 'Annulla ',
                    clicksToEdit: 2
                      })    
              ],

    initComponent: function() {

        var groupingFeature = Ext.create('Ext.grid.feature.GroupingSummary',{
            groupByText: 'Raggruppa per questo campo',
            showGroupsText: 'Raggruppa',
            startCollapsed: false,
            groupHeaderTpl: '{name} ({rows.length} Pratic{[values.rows.length > 1 ? "he" : "a"]})'
        });
 
        
     
        
        this.features = [groupingFeature];
        this.store = 'ConsegneRitiriPratiche';
        this.columns = [

            {header: 'Id',                dataIndex: 'Id',                   xtype:'numbercolumn',    hidden:true,  width: 80,    hideable:true, sortable: true,     resizable: false, groupable:false,    format:'',             align:'right',  flex: 0},
            {header: 'Pratica',            dataIndex: 'IdPra',               xtype:'numbercolumn',    hidden:false, width: 60,    hideable:true, sortable: true,     resizable: false, groupable:false,    format:'',             align:'right',  flex: 0},
            
            {header: 'Stato',           dataIndex: 'IdStatoAttivita',     xtype:'gridcolumn',        hidden:false, width: 90,    hideable:true, sortable: true,     resizable: false, groupable:true,    format:'',             align:'left',      flex: 0, renderer :Ext.getStore('StatoDettagliConsolati').getStatoDettaglio},
                    
        ];

        this.tbar  = [{
         
            text: 'Stampa Griglia',
            iconCls: 'icon-print',
            scope:this,
            handler : function(){
//               Ext.ux.grid.Printer.printAutomatically = false;
//               Ext.ux.grid.Printer.print(this);
 
               Ext.ux.grid.GroupedPrinter.print(this);
            }
        }
      ];
        
        this.callParent(arguments);

    }

});

I have the error Ext.ux.groupedGridPrinter Argument 'grid' was not an HTML element or a string Id

If I use the Ext.ux.grid.Printer.print all is Ok
Where is my error?

[kmanuel@entausa.com]

Try this. I added a check

        } else if (grid instanceof Ext.grid.Panel && grid.body) {
            gridElement = grid.body.dom;
        }

GroupedPrinter.txt

[Candeloro]

Thank you.
In my grid there are some columns hiddens, this make a bad align in the print

[kmanuel@entausa.com]

Can you post screenshots and possibly a full example with static data?

[Candeloro]

I post one example ..you can see the print of the grid also without grupping,
First column is hidden:
Tanks

[kmanuel@entausa.com]

This is for grouped grids only. The example you posted has no grouping feature.

[Candeloro]

I post example whith Grouped..
But your code is also for Grid Gruoped? a Grid grouped can be not collapsed and if i print in state notcollapsed i have the bad allign.
Thanks

[kmanuel@entausa.com]

Adding the feature doesn't make it a grouped grid. See the example here

I added this to the docked items and required 'Ext.ux.grid.GroupedPrinter'

            {
                tooltip: 'Print',
                text: 'Print',
                handler: function(){
                    Ext.ux.grid.GroupedPrinter.print(grid);
                }
            }

[Candeloro]

My English is really very bad and I cannot explain!.

The misalignment problem occurs when I try to print the grouped grid in the state "not grouped".
In this example you sent me, if I set "enableGroupingMenu: true" in Ext.grid.feature.Grouping and I try to print the grid - after I had set "false show in group" - then the problem occurs.

To print, in case of "not grouped," I should use "ex.grid.Print"?
How can I know if at the time I command a print the grid is viewed as a "not grouped"?

Thanks