1. #61
    Sencha User
    Join Date
    Apr 2012
    Location
    Linz, AT
    Posts
    31
    Vote Rating
    1
    drindal is on a distinguished road

      0  

    Default


    Quote Originally Posted by loiane View Post
    Fixed.
    You can get the new version from github and use.
    Template columns are now supported by the plugin.
    thank you! works now.

  2. #62
    Sencha User
    Join Date
    Jun 2012
    Posts
    5
    Vote Rating
    0
    CE_REAL is on a distinguished road

      0  

    Default


    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:

    Code:
    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.

  3. #63
    Sencha User loiane's Avatar
    Join Date
    Aug 2009
    Posts
    181
    Vote Rating
    51
    loiane is a jewel in the rough loiane is a jewel in the rough loiane is a jewel in the rough

      0  

    Default


    Quote Originally Posted by CE_REAL View Post
    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:

    Code:
    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]
    Sencha/Java evangelist
    Author of ExtJS 4 First Look and Mastering Ext JS books
    English blog: http://loianegroner.com
    Portuguese blog: http://loiane.com
    Sencha Examples: https://github.com/loiane

  4. #64
    Sencha User
    Join Date
    Jun 2012
    Posts
    5
    Vote Rating
    0
    CE_REAL is on a distinguished road

      0  

    Default


    Quote Originally Posted by loiane View Post
    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:

    Code:
            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:

    Code:
    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:

    HTML Code:
    <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:

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

    I hope you can help me with this problem.






  5. #65
    Sencha User Radius-Service's Avatar
    Join Date
    Jul 2010
    Location
    Russia, Perm
    Posts
    47
    Vote Rating
    1
    Radius-Service is on a distinguished road

      0  

    Default


    Printing GridPanels with GroupingView and GroupSummary plugin

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

    But working with Ext 3 only

  6. #66
    Sencha User
    Join Date
    Jun 2011
    Posts
    162
    Vote Rating
    2
    rafaelrp is on a distinguished road

      0  

    Default


    This plugin works with 4.2?

    Thanks!

  7. #67
    Sencha User
    Join Date
    Feb 2010
    Location
    Hamburg, Germany
    Posts
    5
    Vote Rating
    0
    orrence is on a distinguished road

      0  

    Default Grouping Views are now supported by ExtJs 4-version of this plugin, too

    Grouping Views are now supported by ExtJs 4-version of this plugin, too


    Quote Originally Posted by Radius-Service View Post
    Printing GridPanels with GroupingView and GroupSummary plugin

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

    But working with Ext 3 only

    See my merged pull request regarding this matter on github.com.

    Cheers,
    orrence.

  8. #68
    Sencha Premium Member
    Join Date
    May 2011
    Location
    Arlington, TX
    Posts
    16
    Vote Rating
    0
    TexasSteve99 is on a distinguished road

      0  

    Default Printer prints more column than configured in grid columns

    Printer prints more column than configured in grid columns


    Hi,

    I ran into an issue under Ext 4.2.1. Some of my data models have more fields than are currently configured in the grid columns. I had to make the following changes in Printer.js:

    bodyTpl changes:
    Code:
                    var bodyTpl = [
                        '<tpl for=".">',
                            '<tr class="group-header">',
                                '<td colspan="{[this.colSpan]}">',
                                  html,  // This is the group header!
                                '</td>',
                            '</tr>', 
                            '<tpl for="children">',
                                '<tr>',
                                    '<tpl for="this.columns">',
                                        '{% if (values.dataIndex==="id") continue; %}',
                                        '<td>',
                                          '{[ parent.get(values.dataIndex) ]}',
                                        '</td>',
                                    '</tpl>',
                                '</tr>',
                            '</tpl>',
                        '</tpl>',
                        {
                            // XTemplate configuration:
                            columns               : columns,
                            colSpan               : columns.length - 1,
                            // XTemplate member functions:
                            childCount : function(c) {
                                return c.length;
                            }
                        }
                    ];
    I also changed Printer.js to use the columnManager.getColumns() instead of interogating grid.columns directly.:

    Code:
                var columns = grid.columnManager.getColumns();
    //            //account for grouped columns
    //            Ext.each(grid.columns, function(c) {
    //                if(c.items.length > 0) {
    //                    columns = columns.concat(c.items.items);
    //                } else {
    //                    columns.push(c);
    //                }
    //            });
    This had the advantage of getting columns in the correct order in case the user had moved one or more columns.

    Thanks,

    Steve Ervin

  9. #69
    Sencha User
    Join Date
    Feb 2010
    Location
    Hamburg, Germany
    Posts
    5
    Vote Rating
    0
    orrence is on a distinguished road

      0  

    Default


    Hi Ervin!
    Have you tried if your changes are compatible with versions 4.1.x, too?
    If the answer is "yes" then I would recommend to make a pull request on the project page on github.
    Thanks,
    orrence.

  10. #70
    Sencha Premium Member
    Join Date
    May 2011
    Location
    Arlington, TX
    Posts
    16
    Vote Rating
    0
    TexasSteve99 is on a distinguished road

      0  

    Default


    I have not. Where I work, we are migrating directly from 3.x -> 4.2.1. I will pull 4.1 and try them. I expect the bodyTpl to work but not the columnManager.

    I will let you know.

    Steve