PDA

View Full Version : Print Preview - Grid (Tested FF/ IE)



durlabh
14 May 2008, 12:46 PM
For couple of our applications, we needed a simple browser print functionality. Since our applications are using a Border Layout (viewport based), most of the content was cut-off, specially for grids etc. Hence, we wrote a small piece of code to get the Form and Grid printed.

For use in grid, just specify it as a plugin. In your application, you'll require a simple PrintPreview.htm.

For test, you can drop the attached files in extJS library's examples\grid folder and you'll notice the print icon in the grid.

Let me know if you encounter any issues or have better suggestions.

olimpia
14 May 2008, 1:56 PM
The enclosure this with problems

durlabh
14 May 2008, 2:15 PM
olimpia, what is the problem you encountered?

olimpia
15 May 2008, 7:57 AM
I don't get to open the file attached, this corrupted

mystix
15 May 2008, 8:01 AM
i've just downloaded and unpacked the zip attachment using 7-zip (http://www.7-zip.org). no problems whatsoever.

are you behind some kind of (corporate) firewall?

durlabh
15 May 2008, 8:06 AM
I've updated the original post with individual files. Additionally, here is the zip file too.

olimpia
15 May 2008, 10:33 AM
thank you...

mankz
13 Jul 2008, 7:33 AM
Great stuff, thanks for sharing! :)

JoomlaMan
17 Aug 2008, 3:45 PM
Having a problem with this. if the grid is more than one page, it does not print the additional pages. also, the first title row takes up one page. anyone have any solutions or what am I doing wrong?

galdaka
18 Aug 2008, 12:35 AM
For couple of our applications, we needed a simple browser print functionality. Since our applications are using a Border Layout (viewport based), most of the content was cut-off, specially for grids etc. Hence, we wrote a small piece of code to get the Form and Grid printed.

For use in grid, just specify it as a plugin. In your application, you'll require a simple PrintPreview.htm.

For test, you can drop the attached files in extJS library's examples\grid folder and you'll notice the print icon in the grid.

Let me know if you encounter any issues or have better suggestions.


Your example works fine!. LIve example at: http://www.jadacosta.es/extjs/examples/print-preview/array-grid.html

Thanks in advance,

JoomlaMan
18 Aug 2008, 3:45 AM
It works fine for that tiny grid. But try adding more rows, and you will see it does not print beyond the first page. The only solution I have found thus far is to remove all stylesheets from the PrintPreview page.

JorisA
19 Aug 2008, 2:51 AM
Nice solution!

JoomlaMan
19 Aug 2008, 11:36 AM
Nice solution!

(:| Are you being sarcastic? I think someone can find a better solution then this 8-|

However for the moment this plugin seems to be the only viable printing mechanism for ExtJS that works for me. The other one is just far too involved to even attempt to incorporate...

JoomlaMan
22 Aug 2008, 6:24 AM
Just curious if anyone else developed a small stylesheet for printing out a multi-page EXT-js grid

dgmyrs
19 Nov 2008, 5:56 AM
Just curious if anyone else developed a small stylesheet for printing out a multi-page EXT-js grid

Just came across this, and implemented it on my site. I found the following works for my needs, YMMV:

Only Include the PrinterFriendly.css in PrintPreview.htm, and add the following definitions:


.x-toolbar {display:none;}
.x-grid3-hd-row td {font-weight: bold;}
.x-panel-header {display:none;}
.x-grid3-row-alt {background-color:#EDEDED;}

If nothing else this should give you a start on what to change to make it look how you want.

sree
24 Feb 2009, 5:23 AM
Hi,

i tried keeping Ext.ux.plugins.Print plugin for a panel containing form and grid, but it didn't work. Below is sample code

var displayPanel = new Ext.Panel({
autoScroll : true,
frame: true,
align:'center',
collapsible: true,
plugins: [Ext.ux.plugins.Print],
// height:650,
// autoHeight:true,
width:650,
layout:'column',
items: [searchForm,grid] }) ;
displayPanel.render('panel-example');


Thanks

Matthias_WB
2 Apr 2009, 1:55 PM
Thank you for sharing... It works fine!

mck4design
2 Apr 2009, 10:53 PM
I added a line into PrinterFriendly.js so ppl who wants to use this extension with editorGridPanel



.
.
.
init: function(o) {

var xType = o.xtype || o.getXType();
switch(xType) {
case 'grid':
case 'editorgrid': // <--------------------- ADDED LINE to "PrinterFriendly.js"
this.component = o;
if(!o.tools) {
o.tools = [];
}
.
.
.

elona
10 Apr 2009, 6:21 AM
i'm trying to print a grid that holds > 300 rows..in FF it prints just one paper with data after an empty paper...whereas in IE after two empty pages it prints all the data...anyone has the same problem?

cculley
21 May 2009, 3:52 PM
Elona, I have had the same problem.....am working on a solution but have not had much luck. Were you able to find anything?

metaleiro
18 Jun 2009, 9:44 AM
How to use with a Form, with a Form using other components, using different components?

Maharshi
24 Jun 2009, 11:40 AM
Hi ,
I am using the print preview plugin for printing grids.I want to know if there is any way to print a tree.How/what can i change in PrinterFriendly.js to help print a Ext tree ?
any clues would be appreciated.

Thanks

wom75
10 Sep 2009, 7:50 AM
@cculley,

Were you able to find out anything on printing large grids?

Thanks

NoahK17
24 Sep 2009, 10:55 AM
Oh man, this modification is GENIUS! Works like a charm with a small bit of editing in PrintPreview.htm to include the proper files, etc. :)

farout
10 Jan 2011, 3:10 PM
hi couldnt get the sample to run in your site

http://www.jadacosta.es/extjs/examples/print-preview/PrintPreview.htm?id=ext-comp-1001&width=579

am having this error

parentWin.document.getElementById(params.id) is null
http://www.jadacosta.es/extjs/examples/print-preview/PrinterFriendly.js
Line 144

micky1984
20 Jan 2011, 3:27 AM
hi guys, if you want to use this plugin with form panel then you have to modify the code in PrinterFriendly.js file:

old code:
case 'form':
this.component = o;
if(o.tools) {
o.tools.push({id: 'print', handler: this.printForm, scope: this});
} else {
var tBar = o.getTopToolbar();
if(tBar) {
var added = false;
for(var i=0, len=tBar.length; i<len; i++) {
if(tBar[i].text == 'Print') {
var btn = tBar[i];
if(!btn.handler) {
Ext.apply(btn, {
handler: this.printForm,
scope: o
});
added = true;
}
break;
}
}
if(!added) {
tBar.push({iconCls: 'print', handler: this.printForm, scope: this});
}
}
}
break;

New modified code:
case 'form':
this.component = o;
if(o.tools) {
o.tools.push({id: 'print', handler: this.printForm, scope: this});
} else {
var tBar = o.getTopToolbar();
if(tBar) { //alert(tBar.items.indexOfKey('shunt'));//alert(tBar.getComponent(0).text);
var added = false;
for(var i=0, len=tBar.items.length; i<len; i++) {
if(tBar.getComponent(i).text == 'Print') {
var btn = tBar.getComponent(i);
if(!btn.handler) {
Ext.apply(btn, {
handler: this.printForm,
scope: this
});
added = true;
}
break;
}
}
if(!added) {
tBar.add({text: 'Print Preview', iconCls: 'print', handler: this.printForm, scope: this});
}
}
}
break;

i hope this will help you... :-)