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
    8,927
    Answers
    656
    Vote Rating
    443
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi