1. #1
    Sencha Premium Member cmendez21's Avatar
    Join Date
    Jun 2007
    Location
    Mexico D.F.
    Posts
    478
    Vote Rating
    0
    cmendez21 is on a distinguished road

      0  

    Default XtPrinter

    XtPrinter




    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
    E2CS: Extjs - Event calendar solution | XtPrinter
    Calendar Thread | XtPrinter Thread| Blog

  2. #2
    Sencha User
    Join Date
    Jan 2008
    Posts
    14
    Vote Rating
    0
    LeandroC is on a distinguished road

      0  

    Default


    Excelente trabajo!
    Excelent work.

    I will try it.

  3. #3
    Ext User netski's Avatar
    Join Date
    Oct 2008
    Posts
    50
    Vote Rating
    0
    netski is on a distinguished road

      0  

    Default


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

    Cheers,
    Timothy

  4. #4
    Sencha Premium Member cmendez21's Avatar
    Join Date
    Jun 2007
    Location
    Mexico D.F.
    Posts
    478
    Vote Rating
    0
    cmendez21 is on a distinguished road

      0  

    Default


    Grouping its not supported yet,
    Grid filtering yes cause it hanldles the records actually shown on the grid
    E2CS: Extjs - Event calendar solution | XtPrinter
    Calendar Thread | XtPrinter Thread| Blog

  5. #5
    Sencha User
    Join Date
    Sep 2008
    Posts
    22
    Vote Rating
    0
    MJFox is on a distinguished road

      0  

    Default


    thanks a lot... very usefull!

    greetings

    MJFox

  6. #6
    Sencha User
    Join Date
    Sep 2008
    Posts
    22
    Vote Rating
    0
    MJFox is on a distinguished road

      0  

    Default


    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

  7. #7
    Ext User
    Join Date
    Sep 2007
    Posts
    104
    Vote Rating
    0
    robin30 is on a distinguished road

      0  

    Default opener.printmygridGO is not a function

    opener.printmygridGO is not a function


    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.

    PHP Code:
    opener.printmygridGO is not a function 
    .

    this is my code:

    PHP 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
                    
    rowspan3,
                    
    handlernewcategories
                
    },{
                    
    text:'Settings',
                    
    slotId:'switchButton',
                    
    cls'btn_32',
                    
    icon'images/process.png',  // <-- icon
                    
    rowspan3,
                    
    handlerbillsetting
                
    },{
                    
    text:'Calculator',
                    
    slotId:'arrangeButton',
                    
    cls'btn_32',
                    
    icon'images/view_window_arrange_32.png',  // <-- icon
                    
    rowspan3,
                    
    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
                    
    rowspan3,
                    
    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
                    
    rowspan3,
                    
    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(
    0ibilldue.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(thisconfig);
        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.onMouseDownthis);
            }, 
    this);
        },

        
    onMouseDown : function(et){
            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(vprecord){
            
    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(gridrecordactionrow,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',
           
    width55
        
    });
    var 
    cm = new Ext.grid.ColumnModel([
        new 
    Ext.grid.RowNumberer(),
        
    sm,
        {
                      
    id:'name',
                  
    header"Name",
                  
    dataIndex'name',
                  
    summaryType'count',
                  
    summaryRenderer: function(vparamsdata){
                        return ((
    === || 1) ? '# of Bills: ' +'' '(1 Bill)');
                    },
                  
    width120
             
    },{
                  
    header"Due",
                  
    dataIndex'due',
                  
    width100,
                  
    renderer: function (datacellrecordrowIndexcolumnIndexstore){
       return 
    data data.dateFormat('Y-m-d') : '';
      }
           },{
                  
    header"Amount",
                  
    dataIndex'amount',
                  
    rendererExt.util.Format.usMoney,
                  
    width80
             
    },checkColumn,{
                  
    header"Paid When",
                  
    dataIndex'paid_when',
                  
    width100,
                  
    renderer: function (datacellrecordrowIndexcolumnIndexstore){
       return 
    data data.dateFormat('Y-m-d') : '';
      }
                  },{
                  
    header"Amount Paid",
                  
    dataIndex'amount_paid',
                  
    rendererExt.util.Format.usMoney,
                  
    summaryRenderer: function(vparamsdata){
                        return ((
    === || 1) ? 'Total' 'Total');
                    },
                  
    width100
             
    },{
                  
    header"Yet to Pay",
                  
    id:'difference',
                  
    dataIndex'difference',
                  
    rendererExt.util.Format.usMoney,
                  
    width100,
                   
    summaryType:'sum',
                  
    summaryRendererExt.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,
            
    dsbillstore,
                
    cmcm
                
    sm:sm,
                
    plugins: [summaryaction ,new Ext.ux.grid.Search({
                    
    iconCls:'icon-zoom'
                    
    ,readonlyIndexes:['all']
                    ,
    disableIndexes:['amount'],
                    
    mode:'local',
                    
    position:'top',
                    
    align:'right'
                
    })],
        
    trackMouseOver:false,
            
    loadMasktrue,
            
    frame:false,
            
    viewConfig: {
                
    forceFit:true
            
    },

    bbar: new Ext.PagingToolbar({
                    
    pageSize15,
                    
    storebillstore,
                    
    displayInfotrue,
                    
    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,
                    
    renderTodocument.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!
                         
    }
                    },
                    
    itemsgrid
                
    });

            
    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'}]
    ),
    remoteSortfalse
    })
    report_pbar = new Ext.PagingToolbar({
    pageSize3,
    storestorex,
    displayInfotrue,
    displayMsg'Showing Records {0} - {1} of {2}',
    emptyMsg"Theres no data to display"
    })
    global_printer = new Ext.grid.XPrinter({
    gridgrid,
    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,
    useItfalse,
    showIttrue,
    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

  8. #8
    Sencha Premium Member cmendez21's Avatar
    Join Date
    Jun 2007
    Location
    Mexico D.F.
    Posts
    478
    Vote Rating
    0
    cmendez21 is on a distinguished road

      0  

    Default


    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); }
    E2CS: Extjs - Event calendar solution | XtPrinter
    Calendar Thread | XtPrinter Thread| Blog

  9. #9
    Ext User
    Join Date
    Sep 2007
    Posts
    104
    Vote Rating
    0
    robin30 is on a distinguished road

      0  

    Default


    thanks for your reply,

    Really appreciate it.

    Overread it, ugh,lol

    time for some glasses en more .

    Thanks for this great extension.

    Regards,
    Robin

  10. #10
    Ext User
    Join Date
    Oct 2008
    Location
    France
    Posts
    17
    Vote Rating
    0
    beebop is on a distinguished road

      0  

    Default


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