XtPrinter

[cmendez21]

Hello everyone Her it is my first release of the XtPrinter 1.0.1

With this new class you can generate output on HTML and PDF from the EXTjs - GRID component


Still a lot of features to be added but the request to release the code were many so here it is as stable as possible for the moment.


go to the download page to get it with manual included, usage demo its on the manual and sample

Downloads at:
English: http://e2cs.mm-mendez.com/?page_id=3&language=en
Spanish: http://e2cs.mm-mendez.com/?page_id=3&language=es

Demo at: http://e2cs.mm-mendez.com/?page_id=4&language=en

Hope you like it

[LeandroC]

Excelente trabajo!
Excelent work.

I will try it.

[netski]

Great addition to the extensions library! Wondering if it handles exporting grouping or grid filtering?

Cheers,
Timothy

[cmendez21]

Grouping its not supported yet,
Grid filtering yes cause it hanldles the records actually shown on the grid

[MJFox]

thanks a lot... very usefull!

greetings

MJFox

[MJFox]

note: don't forget to specify the correct path to the dompdf-directory in /printer/dompdf-0.5.1/dompdf_config.inc.php at line 48

greetings

MJFox

[robin30]

hi all,

Love the idea of being able to print a grid.

I "installed" your extension but i can't get it to work.

i do get the following error.

opener.printmygridGO is not a function 

.

this is my code:

Ext.onReady(function(){
var tbView = new Ext.Toolbar({
        layout: 'cluster',
        cls: "x-cluster-backgrnd",
        items: [{
                text:'Categories',
                slotId:'switchButton',
                cls: 'btn_32',
                icon: 'images/view_window_switch_32.png',  // <-- icon
                rowspan: 3,
                handler: newcategories
            },{
                text:'Settings',
                slotId:'switchButton',
                cls: 'btn_32',
                icon: 'images/process.png',  // <-- icon
                rowspan: 3,
                handler: billsetting
            },{
                text:'Calculator',
                slotId:'arrangeButton',
                cls: 'btn_32',
                icon: 'images/view_window_arrange_32.png',  // <-- icon
                rowspan: 3,
                xtype: 'calculator'
            }]
    });

var tbClip = new Ext.Toolbar({
        layout: 'cluster',
        cls: "x-cluster-backgrnd",
        items: [{
                text:'&nbsp;&nbsp;Add&nbsp;&nbsp;',
                slotId:'pasteButton',
                cls: 'btn_32',
                iconCls: 'addbig',  // <-- icon
                rowspan: 3,
                tooltip: 'Add Bills',
                handler: function(){ addbillform() }
            },{
                text:'Delete',
                slotId:'cutButton',
                iconCls: 'remove',  // <-- icon
                id:'deletebill',
                tooltip: 'Delete Selected Bill',
                handler: function(){ deleteContextMenu() }
            },{
                text:'Edit',
                slotId:'copyButton',
                iconCls: 'edit',  // <-- icon
                tooltip: 'Edit Selected Bill',
                id:'editbill',
                handler: function(){ editbill() }
        }]
    });

var tbPrint = new Ext.Toolbar({
        layout: 'cluster',
        cls: "x-cluster-backgrnd",
        items: [{
                text:'&nbsp;&nbsp;Print&nbsp;&nbsp;',
                slotId:'pasteButton',
                cls: 'btn_32',
                iconCls: 'print',  // <-- icon
                rowspan: 3,
                tooltip: 'Print bills',
                handler:  function(){ createreportgrid() }
            }]
    });
billdue = new Ext.data.Store({
                   proxy: new Ext.data.HttpProxy({
                   url: 'php/database1.php'
                   }),
                   
                   baseParams:{task: "BILLDUE"},
                   
                   reader: new Ext.data.JsonReader({
 root: 'results',
            totalProperty: 'total',
            id: 'id'                   
                   },['id','name','amount','due'])
                   });
billdue.load();
billdue.on('load',function() {
var bill = '';
for(i = 0; i< billdue.getCount(); i++){
          bill += billdue.getAt(i).data.name + ' - $' + billdue.getAt(i).data.amount + '<br>';
          Ext.MessageBox.alert('Bills Due !!','the following bills are due: <br><br><b>' + bill + '</b>'); 
           }
                   
        });      
billstore = new Ext.data.Store({
        id:'store',
          //autoLoad: true,
        proxy: new Ext.data.HttpProxy({
                url: 'php/database1.php', 
                method: 'POST'
            }),
            baseParams:{task: "LISTING"},
        
        reader: new Ext.data.JsonReader({
            root: 'results',
            totalProperty: 'total',
            id: 'id'
        },[ 
            {name:'id', type:'string', mapping:'id'},
           {name: 'name', type: 'string', mapping: 'name'},
            {name: 'due', type: 'date', mapping: 'due',dateFormat: 'Y-m-d'},
{name: 'amount', type:'string',mapping: 'amount'},
{name: 'paid', type:'boolean',mapping: 'paid'},
{name: 'paid_when', type:'date',mapping: 'paid_when',dateFormat: 'Y-m-d'},
{name: 'amount_paid', type:'string',mapping: 'amount_paid'},
{name: 'difference', type:'float',mapping: 'difference'}
            ]),
     // turn on remote sorting
        sortInfo:{field: 'due', direction: "ASC"}
    });
        
Ext.grid.CheckColumn = function(config){
    Ext.apply(this, config);
    if(!this.id){
        this.id = Ext.id();
    }
    this.renderer = this.renderer.createDelegate(this);
};

Ext.grid.CheckColumn.prototype ={
    init : function(grid){
        this.grid = grid;
        this.grid.on('render', function(){
            var view = this.grid.getView();
            view.mainBody.on('mousedown', this.onMouseDown, this);
        }, this);
    },

    onMouseDown : function(e, t){
        if(t.className && t.className.indexOf('x-grid3-cc-'+this.id) != -1){
            e.stopEvent();
            var index = this.grid.getView().findRowIndex(t);
            var record = this.grid.store.getAt(index);
            record.set(this.dataIndex, !record.data[this.dataIndex]);
        }
    },

    renderer : function(v, p, record){
        p.css += ' x-grid3-check-col-td'; 
        return '<div class="x-grid3-check-col'+(v?'-on':'')+' x-grid3-cc-'+this.id+'"> </div>';
    }
};  

action = new Ext.ux.grid.RowActions({
        header:'Actions',
        autoWidth:false,
        actions:[{
            iconCls:'remove',
            tooltip:'Delete Bill'
        }//,{
        //        iconCls:'money',
            //    tooltip:'Pay Bill'
        //}
        ,
        {
            iconCls:'icon-edit-record'
                ,tooltip:'Edit Record'        
        }],callbacks:{
                //'money':function(grid, record, action, row, col) {
               // paidbillform()
               //    },
                'remove':function(grid, record, action, row,col){
                     deleteContextMenu()                
                },
                'icon-edit-record':function(grid,record,action,row,col){   
                    editbill();           
                }
            } 
        });

var sm = new Ext.grid.CheckboxSelectionModel();
var checkColumn = new Ext.grid.CheckColumn({
       header: "Paid",
       dataIndex: 'paid',
       width: 55
    });
var cm = new Ext.grid.ColumnModel([
    new Ext.grid.RowNumberer(),
    sm,
    {
                  id:'name',
              header: "Name",
              dataIndex: 'name',
              summaryType: 'count',
              summaryRenderer: function(v, params, data){
                    return ((v === 0 || v > 1) ? '# of Bills: ' + v +'' : '(1 Bill)');
                },
              width: 120
         },{
              header: "Due",
              dataIndex: 'due',
              width: 100,
              renderer: function (data, cell, record, rowIndex, columnIndex, store){
   return data ? data.dateFormat('Y-m-d') : '';
  }
       },{
              header: "Amount",
              dataIndex: 'amount',
              renderer: Ext.util.Format.usMoney,
              width: 80
         },checkColumn,{
              header: "Paid When",
              dataIndex: 'paid_when',
              width: 100,
              renderer: function (data, cell, record, rowIndex, columnIndex, store){
   return data ? data.dateFormat('Y-m-d') : '';
  }
              },{
              header: "Amount Paid",
              dataIndex: 'amount_paid',
              renderer: Ext.util.Format.usMoney,
              summaryRenderer: function(v, params, data){
                    return ((v === 0 || v > 1) ? 'Total' : 'Total');
                },
              width: 100
         },{
              header: "Yet to Pay",
              id:'difference',
              dataIndex: 'difference',
              renderer: Ext.util.Format.usMoney,
              width: 100,
               summaryType:'sum',
              summaryRenderer: Ext.util.Format.usMoney
             }, action]
             );

    cm.defaultSortable = true;
    
summary = new Ext.grid.GridSummary();
var grid = new Ext.grid.GridPanel({
    id:'lol',
            enableColLock:false,
        // sm: new Ext.grid.RowSelectionModel({singlerow:true}),
        width:700,
            height:500,
        ds: billstore,
            cm: cm, 
            sm:sm,
            plugins: [summary, action ,new Ext.ux.grid.Search({
                iconCls:'icon-zoom'
                ,readonlyIndexes:['all']
                ,disableIndexes:['amount'],
                mode:'local',
                position:'top',
                align:'right'
            })],
    trackMouseOver:false,
        loadMask: true,
        frame:false,
        viewConfig: {
            forceFit:true
        },

bbar: new Ext.PagingToolbar({
                pageSize: 15,
                store: billstore,
                displayInfo: true,
                emptyMsg:'No bills to display'
            }),
     tbar:[{
            xtype:"panel"
            //,title:"Home"
            ,layout:"auto"
            ,items:[{
            xtype:"panel"
            //,title:"Home"
            ,layout:"auto"
            ,items:[{
                layout:"cluster"
                ,cls:"x-cluster-tb-bckgrnd"
                ,id:"tb"
                ,layoutConfig:{
                    rows:2
                }
                ,defaults:{
                    style:"margin-left:3px;"
                    ,border:false
                }
                ,items:[
                        tbClip
                        ,{html:"Add/Delete/Edit"
                            ,cls:"cluster-label"
                        }
                        ,tbView
                        ,{html:"Other"
                            ,cls:"cluster-label"
                        }
                        ,tbPrint
                        ,{html:"Print"
                        ,cls:"cluster-label"
                        }
               ]
            }]
          }]
          }],
          listeners:{
                click: function(){
if (Ext.getCmp('lol').selModel.getCount() > 0){
 Ext.getCmp('deletebill').setDisabled(false);
Ext.getCmp('editbill').setDisabled(false);
 } else {
     Ext.getCmp('deletebill').setDisabled(true);
Ext.getCmp('editbill').setDisabled(true);
 }
 }
          }
        });

var win = new Ext.Window({ 
                id: 'bills-win', 
                title:'Bills', 
                width:740, 
                height:480,
                closable:false,
                draggable:false,
                renderTo: document.body,
                iconCls: 'money', 
                shim:false,
                animCollapse:false, 
                constrainHeader:true, 
                layout: 'fit', 
                listeners:{ 
                  show: function(win){ 
                        Ext.getCmp('lol').el.show();
                         Ext.getCmp('lol').getStore().load(); 
                  },
                  beforedestroy: function(){
                          var autoDestroyIt = false;
                          var grid = Ext.getCmp('lol');
                          document.body.appendChild(Ext.getDom(grid.el));
                          grid.el.hide();
                          this.remove(grid , autoDestroyIt );        //save our grid from destruction!
                     }
                },
                items: grid
            });

        win.show();
billstore.on('load', function() {
   if (Ext.getCmp('lol').selModel.getCount() == 0) {
       Ext.getCmp('deletebill').setDisabled(true);
Ext.getCmp('editbill').setDisabled(true);
  }
})
function createreportgrid(){
storex = new Ext.data.Store({
url:'php/database1.php',
baseParams:{
task:'LISTING'
},
reader: new Ext.data.JsonReader({
root:'records',
id: 'cve',
totalProperty: 'totalCount'
},
[{name:'id', mapping: 'id', type: 'int'},
{name:'name', mapping:'name', type: 'string'},
{name:'due',mapping:'due', type: 'string'},
{name:'amount',mapping:'amount', type: 'string'}]
),
remoteSort: false
})
report_pbar = new Ext.PagingToolbar({
pageSize: 3,
store: storex,
displayInfo: true,
displayMsg: 'Showing Records {0} - {1} of {2}',
emptyMsg: "Theres no data to display"
})
global_printer = new Ext.grid.XPrinter({
grid: grid,
pathPrinter:'./printer',
logoURL: 'companylogo.jpg',
pdfEnable:true,
paperOrientation:'p',
localeData:{
Title:'Employees catalog with Adress',
subTitle:'your subtitle here',
footerText:' footer text here',
pageNo:'Page # ',
printText:' Print ',
closeText:' Close ',
pdfText:' download PDF '
},
useCustom:{
custom:true,
customStore:storex,
columns:['Name','Due','Amount'],
alignCols:['center','left','left'],
pageToolbar:report_pbar,
useIt: false,
showIt: true,
location: 'bbar'
},
showdate:true,
showdateFormat:'Y-F-d H:i:s',
showFooter:true,
styles:'default'
});
storex.on('load', function(){
if (global_printer.flagdatachange){
global_printer.newPage();
}
});
storex.load();
global_printer.prepare();
}
function printmygridGO(obj){
global_printer.printGrid(obj);
}
})////END LAST END LAST END LAST 

regards,

Robin30

[cmendez21]

read the manual and check the sample on the javascript there are some funtions like this


var global_printer = null; // it has to be on the index page or the generator page always
function printmygridGO(obj){ global_printer.printGrid(obj); }
function printmygridGOcustom(obj){ global_printer.printCustom(obj); }

[robin30]

thanks for your reply,

Really appreciate it.

Overread it, ugh,lol

time for some glasses en more .

Thanks for this great extension.

Regards,
Robin

[beebop]

Thanks for your extension. It's very easy to print data with it.
However I has a problem with it. I have a grid of restaurants with 9 columns, and I try to print the 8 first columns.
The columns header are displayed in the good order but the data columns aren't !
The 2nd and 3rd columns of the grid (Categories 1 and 2) should be displayed after the first column (NomRestaurant), but they are displayed after the 8th columns (Tel number).
Here is my code :

    function del(value)
    {
        document.getElementById("supprime").value=value;
        Ext.MessageBox.confirm('Confirmation', 'Voulez vous vraiment supprimer ce restaurant ?',showResult);
    }
    
    function showResult(btn)
    {
        if(btn=="yes")
        {
            page('listeRestaurants.php?action=del&id='+document.getElementById("supprime").value);
        }
                        
    }
    Ext.ux.menu.RangeMenu.prototype.icons = {
        gt: 'img/greater_then.png', 
        lt: 'img/less_then.png',
        eq: 'img/equals.png'
    };
    Ext.ux.grid.filter.StringFilter.prototype.icon = 'img/find.png';

    // create the Data Store
    var ds = new Ext.data.Store({
       // load using script tags for cross domain, if the data in on the same domain as
        // this page, an HttpProxy would be better
       proxy: new Ext.data.HttpProxy({url: 'jason_listeRestaurants.php'}),

        // create reader that reads the Topic records
        reader: new Ext.data.JsonReader({
            root: 'restaurants',
            totalProperty: 'totalCount',
            id: 'IdRestaurant'
        }, [
            {name: 'NomRestaurant', mapping: 'NomRestaurant'},
            {name: 'Adresse1', mapping: 'Adresse1'},
            {name: 'CodePostal', mapping: 'CodePostal'},
            {name: 'Ville', mapping: 'Ville'},
            {name: 'Email', mapping: 'Email'},
            {name: 'Tel', mapping: 'Tel'},
            {name: 'LibelleCategorieRestaurant', mapping: 'LibelleCategorieRestaurant'},
            {name: 'LibelleCategorieRestaurantBis', mapping: 'LibelleCategorieRestaurantBis'},
            {name: 'IdRestaurant', mapping: 'IdRestaurant'}
        ]),

        // turn on remote sorting
        remoteSort: true
    });
    ds.setDefaultSort('NomRestaurant', 'asc');

    // pluggable renders

    function action(value){
        return '<a href="javascript:page(\'setRestaurant.php?id='+value+'\')"><img src="images/icons/page_paintbrush.png" alt="Modifier"></a>&nbsp;&nbsp;&nbsp;<img src="images/icons/bin_empty.png" alt="Supprimer" onClick="javascript:del('+value+')" style="cursor:pointer">';
    }
    // the column model has information about grid columns
    // dataIndex maps the column to the specific data field in
    // the data store
    var filters = new Ext.ux.grid.GridFilters({
        filters:[
            {type: 'string',  dataIndex: 'NomRestaurant'},
            {type: 'string',  dataIndex: 'CodePostal'},
            {type: 'string', dataIndex: 'Ville'},
            {type: 'string',  dataIndex: 'LibelleCategorieRestaurant'}
        ]
    });
    var cm = new Ext.grid.ColumnModel([{
         // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
           header: "Restaurant",
           dataIndex: 'NomRestaurant',
           width: 130
        },{
           header: "Cat&eacute;gorie",
           dataIndex: 'LibelleCategorieRestaurant',
           width: 125
        },{
           header: "Cat&eacute;gorie 2",
           dataIndex: 'LibelleCategorieRestaurantBis',
           width: 125
        },{
           header: "Adresse",
           dataIndex: 'Adresse1',
           width: 170
        },{
           header: "Code postal",
           dataIndex: 'CodePostal',
           width: 80
        },{
           header: "Ville",
           dataIndex: 'Ville',
           width: 120
        },{
           header: "Email",
           dataIndex: 'Email',
           width: 110
        },{
           header: "T&eacute;l",
           dataIndex: 'Tel',
           width: 80
        },{
           header: "Action",
           dataIndex: 'IdRestaurant',
           width: 74,
           sortable: false,
           align:'center',
           renderer : action
        }]);

    // by default columns are sortable
    cm.defaultSortable = true;

    var grid = new Ext.grid.GridPanel({
        el:'topic-grid',
        width:1035,
        height:600,
        title:'Liste des restaurants',
        store: ds,
        cm: cm,
        trackMouseOver:true,
        sm: new Ext.grid.RowSelectionModel({selectRow:Ext.emptyFn}),
        loadMask: true,
        plugins: filters,
        /*bbar: new Ext.PagingToolbar({
            pageSize: 25,
            store: ds,
            displayInfo: true,
            displayMsg: 'Restaurants {0} - {1} &agrave; {2}',
            emptyMsg: "Pas de restaurant"
        }),*/
        tbar : [
            {
                text:'Nouveau restaurant',
                tooltip:'Ajouter un nouveau restaurant',
                iconCls:'add',
                handler: addResto
            },{
                text: 'Exporter',
                tooltip: 'Exporter la liste des restaurants',
                iconCls: 'export',
                handler: function(){
                    basic_printGrid_exclude();
                }
            }
        ]
    });

    function addResto(item, pressed){
       page('addRestaurant.php');
    }

    // render it
    grid.render();

    // trigger the data store load
    ds.load();

    var global_printer = null;  // it has to be on the index page or the generator page  always 
    function printmygridGO(obj){  global_printer.printGrid(obj);    } 
    function printmygridGOcustom(obj){ global_printer.printCustom(obj); }  

    function basic_printGrid_exclude(){
        global_printer = new Ext.grid.XPrinter({
            grid:grid,  // grid object 
            pathPrinter:'./printer',     // relative to where the Printer folder resides  
            logoURL: '../images/logo_trans.gif', // relative to the html files where it goes the base printing  
            pdfEnable: false,  // enables link PDF printing (only save as) 
            hasrowAction:false, 
            excludefields:'8,',  // 0 based index , if it has numberer or action it counts as a column 
            localeData:{
                Title:'Liste des restaurants',   
                subTitle:'by Mond.net',    
                footerText:'Report Footer goes here', 
                pageNo:'Page # ',   //page label
                printText:'Imprimer',  //print document action label 
                closeText:'Fermer',  //close window action label 
                pdfText:'PDF'
            },
            useCustom:{  // in this case you leave null values as we dont use a custom store and TPL
                custom:false,
                customStore:null, 
                columns:[], 
                alignCols:[],
                pageToolbar:null, 
                useIt: false, 
                showIt: false, 
                location: 'bbar'
            },
            showdate:true,// show print date 
            showdateFormat:'Y-F-d H:i:s', // 
            showFooter:true,  // if the footer is shown on the pinting html 
            styles:'default' // wich style youre gonna use 
        }); 
        global_printer.prepare(); // prepare the document 
}

PS : I have also an other problem : the PDF generation doesn't work (Fatal error: Allowed memory size of 20971520 bytes exhausted (tried to allocate 4864 bytes) in /var/www/site13/backoffice/printer/dompdf-0.5.1/include/text_frame_reflower.cls.php(319) : runtime-created function on line 1)