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

      0  

    Default Unanswered: Printing a page that uses Ext JS 4.1 results in a microscopic printpage

    Unanswered: Printing a page that uses Ext JS 4.1 results in a microscopic printpage


    I'm using a simple print script to print a page with a Ext JS 4.1 gridview:

    print_page.js:
    Code:
    function printPage(printButtonElement) {
        $(printButtonElement).remove();
        $('#header').hide();
        $('h4').hide();
        $('body').css("background-color", "fff");
        $('body').css("font-family", "helvetica, arial, sans-serif");
    
        window.print();
    
        $('print').add('<button id="printPage" onclick="javascript:printPage(this)">Print</button>').appendTo(document.getElementById('print'));
        $('#header').show();
        $('h4').show();
        $('body').css("background-color", "f0f0ee");
    }
    All it does it remove the print button while printing and changing some css settings.

    Now for the page I want to print:

    invoiceSummarySuccess.php:
    PHP Code:
    <?php use_javascript('ext-jquery-adapter'); ?>
    <?php use_javascript
    ('ext41/ext-all.js'); ?>
    <?php use_stylesheet
    ('ext41/ext-all.css'); ?>
     
    <?php use_javascript('jquery.cookie.js'); ?>

    <style type="text/css">
        .sample {
            background-color: #D3E8C1;
        }
    </style>

    <script type="text/javascript">

        Date.prototype.getWeek = function() {
            var onejan = new Date(this.getFullYear(),0,1);
            return Math.ceil((((this - onejan) / 86400000) + onejan.getDay()+1)/7);
        }

        var url = '<?php echo sfConfig::get('app_url'?>';
        var customerId = '<?php echo $customer_information['id'?>';

        var now = new Date();
        var period = now.getFullYear() + '' + now.getWeek();

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

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

            initComponent: function(){

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

                Ext.apply(this, {
                    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'
                    }, {
                        header: '<?php echo __('Due date'?>',
                        width: 70,
                        sortable: true,
                        dataIndex: 'due_date',
                        renderer: function(value, metaData, record, rowIndex, colIndex, store) {
                            var returnValue = value;
                            var today = new Date();
                            var dueDate = new Date(value.substring(6,10),value.substring(3,5)-1,value.substring(0,2));
                            if (dueDate < today && record.data.overdue_days > 0) {
                                returnValue = '<p class="red">'+ value +'</p>';
                            }
                            return returnValue;
                        }
                    }, {
                        header: '<?php echo __('Invoice amount'?>',
                        width: 90,
                        sortable: true,
                        dataIndex: 'invoice_amount',
                        renderer: toLocaleValue
                    }, {
                        header: '<?php echo __('Paid'?>',
                        width: 60,
                        sortable: true,
                        dataIndex: 'paid',
                        renderer: toLocaleValue
                    }, {
                        header: '<?php echo __('Remaining'?>',
                        width: 70,
                        sortable: true,
                        dataIndex: 'remaining',
                        renderer: toLocaleValue
                    }, {
                        header: '<?php echo __('Currency'?>',
                        width: 60,
                        sortable: true,
                        dataIndex: 'currency'
                    }, {
                        header: '<?php echo __('Draft'?>',
                        width: 40,
                        sortable: true,
                        dataIndex: 'draft',
                        renderer: redClass
                    }, {
                        header: '<?php echo __('Overdue days'?>',
                        width: 80,
                        sortable: true,
                        dataIndex:"overdue_days",
                        renderer: redClass
                    }, {
                        xtype: 'numbercolumn',
                        header: '<?php echo __('Pay-week'?>',
                        width: 80,
                        sortable: true,
                        dataIndex:"pay_week",
                        format: '0',
                        field: {
                            xtype: 'numberfield',
                            allowBlank: false,
                            minValue: period,
                            maxValue: 220053
                        }
                    }, {
                        header: '<?php echo __('Comment'?>',
                        width: 220,
                        sortable: true,
                        dataIndex:"comment",
                        field: {
                            type: 'textfield',
                            maxLength: 30
                        }
                    }, {
                        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;
                        }
                    }]
                });
                this.callParent();
                

                this.getSelectionModel().on('cellclick', function(sm, selectedRecord) {
                    alert(selectedRecord);
                });

                function toLocaleValue(value, metaData, record, rowIndex, colIndex, store) {
                    return value.toLocaleString();
                }

                  function redLocaleClass(value, metaData, record, rowIndex, colIndex, store) {
                    var checkValue = value.toFixed(2);
                    if (checkValue > 0) {
                        returnValue = checkValue.toLocaleString();
                        returnValue = '<p class="red">'+ checkValue +'</p>';
                    }
                    return returnValue;
                }

                  function redClass(value, metaData, record, rowIndex, colIndex, store) {
                    var returnValue = value.toLocaleString();
                    if (value > 0) {
                        returnValue = '<p class="red">'+ returnValue +'</p>';
                    }
                    return returnValue;
                }
            },

            onSync: function(){
                this.store.sync();
            }
        });

        Ext.define('Writer.Invoice', {
            extend: 'Ext.data.Model',
            fields: [
                { name: "number"},
                { name: "date"},
                { name: "due_date"},
                { name: "invoice_amount",    type: "float"},
                { name: "paid",             type: "float"},
                { name: "remaining",         type: "float"},
                { name: "currency"},
                { name: "draft",             type: "float"},
                { name: "overdue_days"},
                { name: "pay_week",         type: "int"},
                { name: "comment"},
                { name: "send_address"},
                { name: 'pdf'}
            ],
            idProperty: 'number'
        });

        Ext.require([
            'Ext.data.*',
            'Ext.window.MessageBox'
        ]);

        Ext.onReady(function(){
            var total_store = Ext.create('Ext.data.Store', {
                model: 'Writer.Invoice',
                autoLoad: true,
                autoSync: true,
                proxy: {
                    type: 'ajax',
                    api: {
                        read: '<?php echo $apiReadTotalUrl ?>',
                        create: '<?php echo $apiReadTotalUrl ?>',
                        update: '<?php echo $apiReadTotalUrl ?>',
                        destroy: '<?php echo $apiReadTotalUrl ?>'
                    },
                    reader: {
                        type: 'json',
                        successProperty: 'success', //todo -> refer to fieldname in json response
                        root: 'data', //todo -> refer to fieldname in json response
                        messageProperty: 'message' //todo -> refer to fieldname in json response
                    },
                    writer: {
                        type: 'json',
                        writeAllFields: false,
                        root: 'data' //todo -> refer to fieldname in json response
                    },
                    listeners: {
                        exception: function(proxy, response, operation){
                            Ext.MessageBox.show({
                                title: 'REMOTE EXCEPTION',
                                msg: operation.getError(),
                                icon: Ext.MessageBox.ERROR,
                                buttons: Ext.Msg.OK
                            });
                        }
                    }
                }
            });
            
               var store = Ext.create('Ext.data.Store', {
                model: 'Writer.Invoice',
                autoLoad: true,
                autoSync: true,
                proxy: {
                    type: 'ajax',
                    api: {
                        read: '<?php echo $apiReadUrl ?>',
                        create: '<?php echo $apiReadUrl ?>',
                        update: '<?php echo $apiUpdateUrl ?>',
                        destroy: '<?php echo $apiReadUrl ?>'
                    },
                    reader: {
                        type: 'json',
                        successProperty: 'success', //todo -> refer to fieldname in json response
                        root: 'data', //todo -> refer to fieldname in json response
                        messageProperty: 'message' //todo -> refer to fieldname in json response
                    },
                    writer: {
                        type: 'json',
                        writeAllFields: false,
                        root: 'data' //todo -> refer to fieldname in json response
                    },
                    listeners: {
                        exception: function(proxy, response, operation){
                            Ext.MessageBox.show({
                                title: 'REMOTE EXCEPTION',
                                msg: operation.getError(),
                                icon: Ext.MessageBox.ERROR,
                                buttons: Ext.Msg.OK
                            });
                        }
                    }
                }
            });

           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
                }]
            });
        });
    </script>


    <style type="text/css">
        #filters {
            margin-bottom: 10px;
        }
        
        #filters th {
            text-align: left;
        }
        
        #invoice-info {
            height: 90px;
            width: auto;
            clear: both;
        }
        
        #invoice-summary-client {
            width: 600px;
            float: left;
        }
        
        #invoices-summary-total {
            width: 270px;
            height: 90px;
            float: left;
            padding: 5px;
            border: 1px solid black;
        }
        
        #invoices-summary-limit {
            width: 230px;
            height: 90px;
            float: left;
            padding: 5px;
            border-top: 1px solid black;
            border-right: 1px solid black;
            border-bottom: 1px solid black;
        }
        
        #print {
            float: right;
            margin-bottom: 15px;
        }
        
        #invoice-summary-total {
            height: 100%;
            clear: both;
        }
        
        #invoice-summary {
            height: 100%;
        }
    </style>

    <div id="invoice-info">
        <div id="invoice-summary-client">
            <h4><?php echo __('Information').' / '.link_to(__('Client Debtor Summary'), '@client_debtors_summary').' / ' .link_to($customer_information['name'], '@invoice_summary?customer_id=' .$customer_information['id']); ?></h4>
            <h1>Invoice summary</h1>
            <h3><?php echo $customer_information['id'] .' ' .$customer_information['name']; ?></h3>
        </div>
        <div id="invoices-summary-total">
            <table width="100%">
                <tr>
                    <td><?php echo __('Totalamount invoices &euro;'?></td>
                    <td align="right"><?php echo $invoicesummary_totals['totalamount_invoices_euro'?></td>
                </tr>
                <tr>
                    <td><?php echo __('Totalamount invoices &dollar;'?></td>
                    <td align="right"><?php echo $invoicesummary_totals['totalamount_invoices_dollar'?></td>
                </tr>
                <tr>
                    <td><?php echo __('Totalamount invoices &pound;'?></td>
                    <td align="right"><?php echo $invoicesummary_totals['totalamount_invoices_pound'?></td>
                </tr>
                <tr>
                    <td><?php echo __('Overdue &euro;'?></td>
                    <td align="right"><?php echo $invoicesummary_totals['overdue_euro'?></td>
                </tr>
                <tr>
                    <td><?php echo __('Turnover &euro;'?></td>
                    <td align="right"><?php echo $invoicesummary_totals['turnover_euro'?></td>
                </tr>
            </table>
        </div>
        <div id="invoices-summary-limit">
            <table width="100%">
                <tr>
                    <td><?php echo __('Atradius limit &euro;'?></td>
                    <td align="right"><?php echo $invoicesummary_totals['atradius_limit_euro'?></td>
                </tr>
                <tr>
                    <td><?php echo __('Internal limit &euro;'?></td>
                    <td align="right"><?php echo $invoicesummary_totals['internal_limit_euro'?></td>
                </tr>
            </table>
        </div>
    </div>

    <div id="print">
        <button id="printPage" onclick="javascript:printPage(this)">Print</button>
    </div>

    <div id="invoice-summary-total"></div>
    <div id="invoice-summary"></div>

    <script type="text/javascript">
        $(document).ready(function() {
            $('#sidebar').hide();
            $('#main').width('99%');
          });

          function printInvoiceSummary(printButtonElement) {
              $(printButtonElement).remove();
              $('#header').hide();
              $('h4').hide();
              $('body').css("background-color", "fff");
              $('body').css("font-family", "helvetica, arial, sans-serif");
              $('invoice-summary-client').css("width", "400px");
              $('invoices-summary-total').css("margin-top", "10px");
              $('invoices-summary-limit').css("margin-top", "10px");

              window.print();

              $('print').add('<button id="printPage" onclick="javascript:printPage(this)">Print</button>').appendTo(document.getElementById('print'));
              $('#header').show();
              $('h4').show();
              $('body').css("background-color", "f0f0ee");
              $('invoice-summary-client').css("width", "600px");
              $('invoices-summary-total').css("margin-top", "0px");
              $('invoices-summary-limit').css("margin-top", "0px");
          }
    </script>
    I recently changed from Ext JS 3.3 to 4.1 and before I had no problem printing pages. But with the new version everything I print, on paper aswell as .PDF turns out to be microscopicly small.

    I could even post the backend of this code, but I'm fairly sure that that's not the problem.

    I hope someone can help me out with this problem.

    Thanks,

    CE_REAL

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,197
    Vote Rating
    482
    Answers
    690
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    That is a lot of code to weed through .. have you tried a quick stand-alone project to see if you can narrow it down? ie: "hello world"

    Scott.

Thread Participants: 1

Tags for this Thread