1. #31
    Sencha User
    Join Date
    Mar 2012
    Posts
    2
    Vote Rating
    0
    flex62ryz is on a distinguished road

      0  

    Default Untitled title on window.open

    Untitled title on window.open


    For browsers based on WebKit engine when print window opened the title of window has value "Untitled". Fix it for safari you can swap this code:
    Code:
    var win=window.open('','printgrid');
    on this:
    Code:
    var win=window.open('about:blank','printgrid');
    For Chrome this solution fixes problem not fully

  2. #32
    Sencha User
    Join Date
    Mar 2012
    Posts
    2
    Vote Rating
    0
    flex62ryz is on a distinguished road

      0  

    Default "null" text in column values in print grid

    "null" text in column values in print grid


    In column values of print grid instead of empty values displays string with "null" text. I fix it by replace code:
    line 108
    Code:
    var body =Ext.create('Ext.XTemplate',this.bodyTpl).apply(columns);
    on this
    Code:
    var body = Ext.htmlDecode(Ext.create('Ext.XTemplate',this.bodyTpl).apply(columns));
    and replace this:
    line 248
    Code:
    '<td>\{{dataIndex}\}</td>'
    on this
    Code:
    '<td>&lt;tpl if="{dataIndex}"&gt;\{{dataIndex}\}&lt;/tpl&gt;</td>'

  3. #33
    Touch Premium Member
    Join Date
    Jun 2008
    Location
    Germany, Dortmund
    Posts
    249
    Vote Rating
    13
    hschaefer123 will become famous soon enough

      1  

    Default


    I am currently migrating my Ext 3.x portal solution to Ext 4.1.x.

    Based on Loaines work and my former addons i figured out some issues and fixed them for my needs!

    1) wrong use of renderer
    i replaced "column.renderer.call" by
    column.renderer(value, meta, item, row, col, grid.store, grid.view)
    If you still will use column.renderer.call, first param (scope) needs to be column instead of this.

    The issue is on using locales different from english and the columns renderer needs corresponding scope. If not some column renderer (datecolumn) will not format dates overwriten in locale based files!

    2) wrong asociation of convertedData
    array was indexed by dataIndex, but this restriction allows only single use of dataIndex for columns, means you can't use dataindex inside templatecolumn, because value will be overwritten (for example tpl columns with icons, all column using the same dataindex will be shown icon value). Last column wins!
    For this reason i index columns by column.id to allow multiple use of corresponding values.

    3) adding support for column align (left|center|right)
    Added basic formatting support. Currently only column alignment that is used by numbercolmns (align: right).

    4) new feature print preview window
    During migration i found out that i must not upgrade my iframe panel, because default ux iframe panel fullfills my needs. At this point i thought why not to use iframe panel for printing instead of open new window (it will be quite more comfortable) and so the new print preview window found his way into gridprinter (inspired by loaines print buttons).

    grid-printer-preview.png

    Here is the source!
    I left the changes inside as comments to see what i have changed.
    Also added requires for iframe panel.

    Update: updated version and example can be found at
    Source: https://github.com/hschaefer123/uops-ext

    Update2: online demo available
    Demo: http://jsfiddle.net/hschaefer123/NHfsN/
    (currently print stylesheet does not work on jsfiddle, but feature itself is ok!)


    Code:
    /**
     * @class Ext.ux.grid.Printer
     * @author Ed Spencer (edward@domine.co.uk)
     * Helper class to easily print the contents of a grid. Will open a new window with a table where the first row
     * contains the headings from your column model, and with a row for each item in your grid's store. When formatted
     * with appropriate CSS it should look very similar to a default grid. If renderers are specified in your column
     * model, they will be used in creating the table. Override headerTpl and bodyTpl to change how the markup is generated
     * 
     * Usage:
     * 
     * 1 - Add Ext.Require Before the Grid code
     * Ext.require([
     *   'Ext.ux.grid.GridPrinter',
     * ]);
     * 
     * 2 - Declare the Grid 
     * var grid = Ext.create('Ext.grid.Panel', {
     *   columns: //some column model,
     *   store   : //some store
     * });
     * 
     * 3 - Print!
     * Ext.ux.grid.Printer.mainTitle = 'Your Title here'; //optional
     * Ext.ux.grid.Printer.print(grid);
     * 
     * Original url: http://edspencer.net/2009/07/printing-grids-with-ext-js.html
     * 
     * Modified by Loiane Groner (me@loiane.com) - September 2011 - Ported to Ext JS 4
     * http://loianegroner.com (English)
     * http://loiane.com (Portuguese)
     * 
     * Modified by Paulo Goncalves - March 2012
     * 
     * Modified by Beto Lima - March 2012
     * 
     * Modified by Beto Lima - April 2012
     *
     * Modified by Paulo Goncalves - May 2012
     * 
     * Modified by Nielsen Teixeira - 2012-05-02
     *
     * Modified by Joshua Bradley - 2012-06-01
     * 
     * Modified by Holger Schäfer - 2012-07-30
     *
     * FORUM: http://www.sencha.com/forum/showthread.php?146348-ExtJS-4-Grid-Printer-Plugin
     * GIT: https://github.com/loiane/extjs4-ux-gridprinter
     */
    Ext.define("Ext.ux.grid.Printer", {   
        requires: [
                   'Ext.XTemplate',
                   'Ext.ux.IFrame'
        ],
        statics: {
            /**
             * Prints the passed grid. Reflects on the grid's column model to build a table, and fills it using the store
             * @param {Ext.grid.Panel} grid The grid to print
             */
            print: function(grid, targetEl) {
                if (!targetEl) targetEl = Ext.getBody();
                
                //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) {
                    if (c.items.length > 0) {
                        columns = columns.concat(c.items.items);
                    } else {
                        columns.push(c);
                    }
                });
    
                //build a useable array of store data for the XTemplate
                var data = [];
                var emptyText = this.text;
                grid.store.data.each(function(item, row) {
                    var convertedData = {};
                    //apply renderers from column model
                    for (var key in item.data) {
                        var value = item.data[key];
                        
                        Ext.each(columns, function(column, col) {
                            if (column && column.dataIndex == key) {
                                /*
                                 * TODO: add the meta to template
                                 */                                                                                    
                                var meta = {item: '', tdAttr: '', tdCls: '', style: ''};                            
                                value = column.renderer 
                                    //? column.renderer.call(column, value, meta, item, row, col, grid.store, grid.view) 
                                    ? column.renderer(value, meta, item, row, col, grid.store, grid.view)
                                    : value;
                                    
                                // add style info
                                // TODO: find out how to use metahandling via template (above handling via renderer does not work)
                                var align = column.align; // [left|center|right]
                                var style = '';
                                if (align  != 'left') {
                                    style += 'text-align:' + align + ';';
                                    value = '<div style="' + style + '">' + value + '</div>';
                                }
                                convertedData[column.id] = (Ext.isEmpty(value)) 
                                    ? emptyText : value;
                            }
                        }, this);      
                    }
                    data.push(convertedData);
                });
                
                //remove columns that do not contains dataIndex or dataIndex is empty. for example: columns filter or columns button
                var clearColumns = [];
                Ext.each(columns, function(column) {
                    if (column && !Ext.isEmpty(column.dataIndex) && !column.hidden) {
                        clearColumns.push(column);
                    }
                });
                columns = clearColumns;
                
                //get Styles file relative location, if not supplied
                if (this.stylesheetPath === null) {
                    var scriptPath = Ext.Loader.getPath('Ext.ux.grid.Printer'); // library/extjs/src/ux/grid/Printer.js
                    this.stylesheetPath = scriptPath.substring(0, scriptPath.indexOf('Printer.js')) + 'gridPrinterCss/print.css';
                }
    
                //use the headerTpl and bodyTpl markups to create the main XTemplate below
                var headings = Ext.create('Ext.XTemplate', this.headerTpl).apply(columns);
                var body     = Ext.create('Ext.XTemplate', this.bodyTpl).apply(columns);
                var pluginsBody = '',
                    pluginsBodyMarkup = [];
                
                //add relevant plugins
                Ext.each(grid.plugins, function(p) {
                    if (p.ptype == 'rowexpander') {
                        pluginsBody += p.rowBodyTpl.join('');
                    }
                });
                
                if (pluginsBody != '') {
                    pluginsBodyMarkup = [
                        '<tr class="{[xindex % 2 === 0 ? "even" : "odd"]}"><td colspan="' + columns.length + '">',
                          pluginsBody,
                        '</td></tr>',
                    ];
                }
                
                //Here because inline styles using CSS, the browser did not show the correct formatting of the data the first time that loaded
                var htmlMarkup = [
                    '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">',
                    '<html class="' + Ext.baseCSSPrefix + 'ux-grid-printer">',
                      '<head>',
                        '<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />',
                        '<link href="' + this.stylesheetPath + '" rel="stylesheet" type="text/css" />',
                        '<title>' + grid.title + '</title>',
                      '</head>',
                      '<body class="' + Ext.baseCSSPrefix + 'ux-grid-printer-body">',
                      /*
                      '<div class="' + Ext.baseCSSPrefix + 'ux-grid-printer-noprint ' + Ext.baseCSSPrefix + 'ux-grid-printer-links">',
                          '<a class="' + Ext.baseCSSPrefix + 'ux-grid-printer-linkprint" href="javascript:void(0);" onclick="window.print();">' + this.printLinkText + '</a>',
                          '<a class="' + Ext.baseCSSPrefix + 'ux-grid-printer-linkclose" href="javascript:void(0);" onclick="window.close();">' + this.closeLinkText + '</a>',
                      '</div>',
                      */
                      '<h1>' + this.mainTitle + '</h1>',
                        '<table>',
                            '<thead>',
                              '<tr>',
                                headings,
                              '</tr>',
                            '</thead>',
                            '<tbody>',
                              '<tpl for=".">',
                                '<tr class="{[xindex % 2 === 0 ? "even" : "odd"]}">',
                                  body,
                                '</tr>',
                                pluginsBodyMarkup.join(''),
                              '</tpl>',
                          '</tbody>',
                        '</table>',
                      '</body>',
                    '</html>'           
                ];
                var html = Ext.create('Ext.XTemplate', htmlMarkup).apply(data);
                // produce inline src content from html
                // var src = 'data:text/html;charset=utf-8,' + escape(html);
                
                var printWindow = Ext.createWidget('window', {
                    requireIcons: ['cross', 'printer'],
                    title: this.printPreviewText + ': ' + grid.title,
                    iconCls: 'icon-printer',
                    width: 640,
                    height: 480,
                    layout: 'fit',
                    animateTarget: targetEl,
                    resizable: false,
                    maximizable: true,
                    items: [{
                        xtype: 'uxiframe',
                        itemId: 'iframe'
                    }],
                    dockedItems: [
                        {
                            xtype: 'toolbar',
                            dock: 'bottom',
                            ui: 'footer',
                            layout: {
                                pack: 'end',
                                type: 'hbox'
                            },
                            items: [
                                {
                                    xtype: 'button',
                                    text: this.printLinkText,
                                    iconCls: 'icon-printer',
                                    handler: function(btn, e) {
                                        iframe.getWin().print();
                                    },
                                    scope: this
                                },
                                {
                                    xtype: 'button',
                                    text: this.closeLinkText,
                                    iconCls: 'icon-cross',
                                    handler: function(btn, e) {
                                        this.up('window').close();
                                    }
                                }
                            ]
                        }
                    ]
                });
                var iframe = printWindow.down('#iframe');
                printWindow.show(targetEl, function() {
                    var doc = iframe.getDoc();
                    doc.open();
                    doc.write(html);
                    doc.close();
                }, this);                        
    
                /*
                //open up a new printing window, write to it, print it and close
                var win = window.open('', 'printgrid');
                // fix safari
                //var win=window.open('about:blank','printgrid');
                            
                //document must be open and closed
                win.document.open();
                win.document.write(html);
                win.document.close();
                */
                
                //An attempt to correct the print command to the IE browser
                if (this.printAutomatically){
                    if (Ext.isIE){
                        window.print();
                    } else {
                        win.print();
                    }
                }
                
                //Another way to set the closing of the main
                if (this.closeAutomaticallyAfterPrint){
                    if(Ext.isIE){
                        window.close();
                    } else {
                        win.close();
                    }                
                }
            },
    
            /**
             * @property stylesheetPath
             * @type String
             * The path at which the print stylesheet can be found (defaults to 'ux/grid/gridPrinterCss/print.css')
             */
            stylesheetPath: null,
            
            /**
             * @property printAutomatically
             * @type Boolean
             * True to open the print dialog automatically and close the window after printing. False to simply open the print version
             * of the grid (defaults to false)
             */
            printAutomatically: false,
            
            /**
             * @property closeAutomaticallyAfterPrint
             * @type Boolean
             * True to close the window automatically after printing.
             * (defaults to false)
             */
            closeAutomaticallyAfterPrint: false,    
            
    
            /**
             * @cfg {String} text
             * The header text to be used as innerHTML (html tags are accepted) to display in the Grid.
             * **Note**: to have a clickable header with no text displayed you can use the default of ` ` aka `&nbsp;`.
             */        
            text: ' ',
            
            /**
             * @property mainTitle
             * @type String
             * Title to be used on top of the table
             * (defaults to empty)
             */
            mainTitle: '',
    
            /**
             * Text show as window title
             * @type String
             */
            printPreviewText: 'Printpreview',        
            
            /**
             * Text show on print link
             * @type String
             */
            printLinkText: 'Print',
            
            /**
             * Text show on close link
             * @type String
             */
            closeLinkText: 'Close',
            
            /**
             * @property headerTpl
             * @type {Object/Array} values
             * The markup used to create the headings row. By default this just uses <th> elements, override to provide your own
             */
            headerTpl: [ 
                '<tpl for=".">',
                    '<th>{text}</th>',
                '</tpl>',
            ],
    
            /**
             * @property bodyTpl
             * @type {Object/Array} values
             * The XTemplate used to create each row. This is used inside the 'print' function to build another XTemplate, to which the data
             * are then applied (see the escaped dataIndex attribute here - this ends up as "{dataIndex}")
             */
            bodyTpl: [
                '<tpl for=".">',
                    //'<td>\{{dataIndex}\}</td>',
                    '<td>\{{id}\}</td>',                
                '</tpl>',
            ]
        }
    });

  4. #34
    Sencha User
    Join Date
    Aug 2012
    Posts
    1
    Vote Rating
    0
    dumidu is on a distinguished road

      0  

    Default


    Great plugin

    happy to know how to add row numbers to the printed grid

  5. #35
    Sencha User
    Join Date
    Oct 2010
    Location
    St. Louis, Missouri
    Posts
    44
    Vote Rating
    19
    caballero will become famous soon enough

      0  

    Default


    Quote Originally Posted by hschaefer123 View Post
    Here is the source!
    I left the changes inside as comments to see what i have changed.
    Also added requires for iframe panel.

    Update: updated version and example can be found at
    https://github.com/hschaefer123/uops-ext
    Hey hschaefer123,
    Big thanks for what you've done here.
    Providing the code with example html in your git repository is a beautiful thing.
    Love the improvements.

  6. #36
    Sencha User
    Join Date
    Oct 2010
    Location
    St. Louis, Missouri
    Posts
    44
    Vote Rating
    19
    caballero will become famous soon enough

      0  

    Default


    Quote Originally Posted by hschaefer123 View Post
    I am currently migrating my Ext 3.x portal solution to Ext 4.1.x.

    4) new feature print preview window
    During migration i found out that i must not upgrade my iframe panel, because default ux iframe panel fullfills my needs. At this point i thought why not to use iframe panel for printing instead of open new window (it will be quite more comfortable) and so the new print preview window found his way into gridprinter (inspired by loaines print buttons).

    Attachment 37596

    Here is the source!
    I left the changes inside as comments to see what i have changed.
    Also added requires for iframe panel.
    @hschaefer123
    It was reported to me that the new print preview fails in IE. (IE8 & IE9)
    I've verified that the supplied example fails in the same manner.
    What happens is the entire page as shown in the image above gets printed, not just the frame as it does in Safari and Firefox.
    I've looked through the IE config and can see nothing that would change this behavior.

    I will keep poking around, but would appreciate some guidance if you have some thoughts.

  7. #37
    Sencha User
    Join Date
    Oct 2010
    Location
    St. Louis, Missouri
    Posts
    44
    Vote Rating
    19
    caballero will become famous soon enough

      0  

    Default


    Quote Originally Posted by caballero View Post
    @hschaefer123
    It was reported to me that the new print preview fails in IE. (IE8 & IE9)
    I've verified that the supplied example fails in the same manner.
    What happens is the entire page as shown in the image above gets printed, not just the frame as it does in Safari and Firefox.
    I've looked through the IE config and can see nothing that would change this behavior.

    I will keep poking around, but would appreciate some guidance if you have some thoughts.
    OK, I think I have a simple solution.

    insert his line:
    iframe.getWin().focus();

    before this line:
    iframe.getWin().print();

    My tests show this solve my IE issues.

  8. #38
    Sencha User
    Join Date
    Nov 2011
    Posts
    1
    Vote Rating
    0
    dolaemoney is on a distinguished road

      0  

    Default


    Have not used this yet
    Simply thank for author's effort

  9. #39
    Touch Premium Member
    Join Date
    Jun 2008
    Location
    Germany, Dortmund
    Posts
    249
    Vote Rating
    13
    hschaefer123 will become famous soon enough

      1  

    Default


    Hi Guys,
    just solving this issue by myself to see, that caballero has fixed it before the same way.

    I have updated the repository with the new fix used for all browsers because the same solution also work on chrome and firefox.

    I also added jsfiddle demo of grid print to see it in action (currently i could not get css stylesheet running hosted on githib for wrong mime header, but functionally it works!) .

    For Demo link see original post above.

    Cheers Holger

  10. #40
    Touch Premium Member
    Join Date
    May 2010
    Posts
    1
    Vote Rating
    0
    mvorpagel is on a distinguished road

      0  

    Default


    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!