ExtJS 4: Grid Printer Plugin

[drindal]

Fixed.
You can get the new version from github and use.
Template columns are now supported by the plugin.

thank you! works now.

[CE_REAL]

I've got a new challenge, I see the Grid Printer working when a gird is created. But I'm using the http://dev.sencha.com/deploy/ext-4.0...er/writer.html example, which creates no grid but only defines it and creates it using the following:

var main = Ext.create('Ext.container.Container', {
            renderTo: Ext.Element.get('invoice-summary'),
            layout: 'fit',
            autoHeight: true,
            items: [{
                itemId: 'grid',
                xtype: 'writergrid',
                flex: 1,
                store: store
            }]
});

So when I try using the gridprinter it sends an empty grid, which shows up in Firebug as h() which has no store to access by using grid.store. So I get errors and have no data to show in the printview.

[loiane]

I've got a new challenge, I see the Grid Printer working when a gird is created. But I'm using the http://dev.sencha.com/deploy/ext-4.0...er/writer.html example, which creates no grid but only defines it and creates it using the following:

var main = Ext.create('Ext.container.Container', {
            renderTo: Ext.Element.get('invoice-summary'),
            layout: 'fit',
            autoHeight: true,
            items: [{
                itemId: 'grid',
                xtype: 'writergrid',
                flex: 1,
                store: store
            }]
});

So when I try using the gridprinter it sends an empty grid, which shows up in Firebug as h() which has no store to access by using grid.store. So I get errors and have no data to show in the printview.

You need to pass an instance of a GridPanel to the plugin.
In your case, you can get the grid instance using the following code - this will be your grid variable:

Ext.ComponentQuery.query('writergrid[itemId=grid]')[0]

[CE_REAL]

You need to pass an instance of a GridPanel to the plugin.
In your case, you can get the grid instance using the following code - this will be your grid variable:

Ext.ComponentQuery.query('writergrid[itemId=grid]')[0]

I used your solution and I got it to work with the toolbar printbutton. Now I'm being a bit demanding with my usage of the gridprinter.

I'll explain my whole situation a bit better:

First of all I've got one page with two containers:

        var total = Ext.create('Ext.container.Container', {
            renderTo: Ext.Element.get('invoice-summary-total'),
            layout: 'fit',
            autoHeight: true,
            items: [{
                itemId: 'grid',
                xtype: 'writergrid',
                flex: 1,
                store: total_store
            }]
        });


        var main = Ext.create('Ext.container.Container', {
            renderTo: Ext.Element.get('invoice-summary'),
            layout: 'fit',
            autoHeight: true,
            items: [{
                itemId: 'grid',
                xtype: 'writergrid',
                flex: 1,
                store: store
            }]
        });

Both are using the same defined grid:

var grid = Ext.define('Writer.Grid', {
        extend: 'Ext.grid.Panel',
        alias: 'widget.writergrid',


        requires: [
            'Ext.grid.plugin.CellEditing',
            'Ext.form.field.Text',
            'Ext.toolbar.TextItem',
            'Ext.ux.grid.Printer'
        ],


        initComponent: function(){


            this.editing = Ext.create('Ext.grid.plugin.RowEditing', {
                clicksToMoveEditor: 1,
                autoCancel: false
            });


            Ext.apply(this, {
                title: 'Invoice summary' + ' [<?php echo $customer_information['id'] .' ' .$customer_information['name'] ?>]',
                iconCls: 'icon-grid',
                frame: true,
                plugins: [this.editing],
                columns: [{
                    text: '<?php echo __('Invoice number') ?>',
                    width: 80,
                    sortable: true,
                    dataIndex: 'number',
                    renderer: function(value, metaData, record, rowIndex, colIndex, store) {
                        var linkReturn = '';
                        var customerId = '<?php echo $customer_information['id'] ?>';
                        if (!isNaN(record.data.number) && record.data.number != '') {
                            linkReturn = '<a href="' + url + "/agent/invoicePaymentSummary/" + '<?php echo $customer_information['id'] ?>'+ "/" + record.data.number +'">'+ record.data.number +'</a>';
                        } else {
                            linkReturn = record.data.number;
                        }
                        return linkReturn;
                       }
                }, {
                    header: '<?php echo __('Date') ?>',
                    width: 70,
                    sortable: true,
                    dataIndex: 'date',
                    renderer: Ext.util.Format.dateRenderer('d-m-Y'),
                }, {
                    header: '<?php echo __('Due date') ?>',
                    width: 70,
                    sortable: true,
                    dataIndex: 'due_date',
                    renderer: Ext.util.Format.dateRenderer('d-m-Y'),
                    renderer: function(value, metaData, record, rowIndex, colIndex, store) {
                        var returnValue = Ext.Date.format(value, "d-m-Y");
                        var dueDate = value;
                        var today = new Date();
                        if(dueDate < today && record.data.overdue_days > 0) {
                            returnValue = '<p class="red">'+ returnValue +'</p>';
                        }
                        return returnValue;
                    }
                }, {
                    header: '<?php echo __('Invoice amount') ?>',
                    width: 90,
                    sortable: true,
                    dataIndex: 'invoice_amount',
                    align: 'right',
                    renderer: money
                }, {
                    header: '<?php echo __('Paid') ?>',
                    width: 90,
                    sortable: true,
                    dataIndex: 'paid',
                    align: 'right',
                    renderer: money
                }, {
                    header: '<?php echo __('Remaining') ?>',
                    width: 90,
                    sortable: true,
                    dataIndex: 'remaining',
                    align: 'right',
                    renderer: money
                }, {
                    header: '<?php echo __('Currency') ?>',
                    width: 60,
                    sortable: true,
                    dataIndex: 'currency'
                }, {
                    header: '<?php echo __('Draft') ?>',
                    width: 40,
                    sortable: true,
                    dataIndex: 'draft',
                    align: 'right',
                    renderer: redClass
                }, {
                    header: '<?php echo __('Overdue days') ?>',
                    width: 80,
                    sortable: true,
                    dataIndex:"overdue_days",
                    align: 'right',
                    renderer: redOverdueDaysClass
                }, {
                    xtype: 'numbercolumn',
                    header: '<?php echo __('Pay-week') ?>',
                    width: 80,
                    sortable: true,
                    dataIndex:"pay_week",
                    format: '0',
                    field: {
                        xtype: 'numberfield',
                        allowBlank: false,
                        minValue: period,
                        regex: /^[0-9]{4}([0][1-9]|[1-4][0-9]|[5][0-2])$/i,
                        maskRe: /^[0-9]{4}([0][1-9]|[1-4][0-9]|[5][0-2])$/i,
                        regexText: 'Format YYYYWW (Min. YYYY01 - Max. YYYY52)'
                    },
                    align: 'right',
                    vtype: 'payweek',
                    renderer: redPayWeekField
                }, {
                    header: '<?php echo __('Comment') ?>',
                    width: 220,
                    sortable: true,
                    dataIndex:"comment",
                    field: {
                        type: 'textfield',
                        maxLength: 30,
                        emptyText: ''
                    },
                    renderer: redCommentField
                }, {
                    header: '<?php echo __('Send address') ?>',
                    width: 200,
                    sortable: true,
                    dataIndex:"send_address"
                }, {
                    header: '<?php echo __('PDF') ?>',
                    width: 40,
                    sortable: true,
                    dataIndex:"pdf",
                    renderer: function(value, metaData, record, rowIndex, colIndex, store) {
                        var pdfReturn = '';
                        var customerId = '<?php echo $customer_information['id'] ?>';
                        if (!isNaN(record.data.number) && record.data.number != '')
                               pdfReturn = '<a href="' + url + '/agent/invoiceSummary/viewInvoice/'+ record.data.number +'/'+ customerId +'" target="_blank">'+ '<img src="/images/icons/pdf_icon.gif"></a>';
                        return pdfReturn;
                    }
                }],
                tbar: [{
                    text: 'Print',
                    iconCls: 'icon-print',
                    handler : function(){
                        Ext.ux.grid.Printer.printAutomatically = true;
                        Ext.ux.grid.Printer.print(Ext.ComponentQuery.query('writergrid[itemId=grid]')[1]);
                    }
                }]
            });
            this.callParent();
        
        onSync: function(){
            this.store.sync();
        }
    });

Now I'd like to print the first grid and print the second grid with both their own print button in the toolbar.

I'm thinking of maybe creating two different toolbars and using them in the container, but I don't really know how to add them to the container.

And the second thing I like, is using my own print button outside of the grid like:

<div id="print"><button id="printPage" onclick="Ext.ux.GridPrinter.print(invoiceSummaryGrid)">Print</button></div>

But I can't get my grid object to send to the Ext.ux.GridPrinter.print function. I get the following error:

TypeError: grid.store is undefined
grid.store.data.each(function(item, row)

I hope you can help me with this problem.

[Radius-Service]

Printing GridPanels with GroupingView and GroupSummary plugin

http://www.rahulsingla.com/blog/2010...summary-plugin

But working with Ext 3 only