PDA

View Full Version : Printing a page that uses Ext JS 4.1 results in a microscopic printpage



CE_REAL
12 Jun 2012, 11:05 PM
I'm using a simple print script to print a page with a Ext JS 4.1 gridview:

print_page.js:


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

scottmartin
13 Jun 2012, 1:53 PM
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.