View Full Version : How To Print A Grid Component In New Browser Window

10 Nov 2011, 6:37 AM
Before you laugh at my question, its about printing a Grid component. Most GXT apps are single interface apps thus they can have several panels and multiple windows over-layed on the screen, how do you guys print from a Grid in any of such situations. ExtJs has a plugin (GridPrinter) that does something similar by opening the Grid in a new tab and rendering it as a HTML Table so that it can be easily printed, is there a solution or reusable code for GXT on which one can build on to solve this problem.

Alternatively, I don't know if anyone has successfully ported or can help with porting the ExtJs solution here : https://github.com/edspencer/Ext.ux.Printer or is there a way one can use it "as is" in a GXT project ???

This is becoming a show stopper for me, I can't show "clients" that stuff is ready because the want to see it printed. Please help a brother. Thanks

10 Nov 2011, 7:32 PM
I downloaded the Ext.ux.Printer plugin and added the Js and Css files to my host page, I also added ext-all.js to the host page. I am attempting to use the Js version in my GXT app, but so far it has not worked, here is what I did :

Button printBtn = new Button("Print", new SelectionListener<ButtonEvent>() {
public void componentSelected(ButtonEvent evt) {
topBar.add(new FillToolItem());

// cal the JSNI print method with the id of the GXT Grid
// we want to print
public void onPrint() {


private native void print(String id)/*-{
$wnd.Ext.ux.Printer.print( $wnd.Ext.getCmp(id) );

And here is the error it produces

04:39:33.220 [ERROR] [thriftr] Uncaught exception escaped

com.google.gwt.core.client.JavaScriptException: (TypeError): component is undefined
at com.google.gwt.dev.shell.BrowserChannelServer.invokeJavascript(BrowserChannelServer.java:237)
at com.google.gwt.dev.shell.ModuleSpaceOOPHM.doInvoke(ModuleSpaceOOPHM.java:132)
at com.google.gwt.dev.shell.ModuleSpace.invokeNative(ModuleSpace.java:561)
at com.google.gwt.dev.shell.ModuleSpace.invokeNativeObject(ModuleSpace.java:269)
at com.google.gwt.dev.shell.JavaScriptHost.invokeNativeObject(JavaScriptHost.java:91)
at com.google.gwt.core.client.impl.Impl.apply(Impl.java)
at com.google.gwt.core.client.impl.Impl.entry0(Impl.java:214)
at sun.reflect.GeneratedMethodAccessor626.invoke(Unknown Source)
at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:25)
at java.lang.reflect.Method.invoke(Method.java:597)
at com.google.gwt.dev.shell.MethodAdaptor.invoke(MethodAdaptor.java:103)
at com.google.gwt.dev.shell.MethodDispatch.invoke(MethodDispatch.java:71)
at com.google.gwt.dev.shell.OophmSessionHandler.invoke(OophmSessionHandler.java:167)
at com.google.gwt.dev.shell.BrowserChannelServer.reactToMessages(BrowserChannelServer.java:281)
at com.google.gwt.dev.shell.BrowserChannelServer.processConnection(BrowserChannelServer.java:531)
at com.google.gwt.dev.shell.BrowserChannelServer.run(BrowserChannelServer.java:352)
at java.lang.Thread.run(Thread.java:619)

10 Nov 2011, 8:05 PM
I think where I am stuck now is how to pass the GXT Grid component to the ExtJs plugin, I am trying to obtain the id of the GXT Grid and then pass it to the ExtJs plugin. However neither getId() nor getItemId() on the GXT Grid has worked, they both produce "undefined" meaning that ExtJs cannot see any component with the id or itemId that our GXT Grid has

Any hints please ??

10 Nov 2011, 11:46 PM
meaning that ExtJs cannot see any component with the id or itemId that our GXT Grid has

ExtJS will never be able to find GXT components. These two are not linked at all. Have you looked at the source code of the javascript version of the printer class? Normally you can very easy convert them to a java one. You have all the code required to make it work.

11 Nov 2011, 12:53 AM
Thanks for your timely reply, I knew that ultimately I would have to port the Js code to GXT but I wanted to explore "reusing" the Js code "as is". This porting may take longer ....

Thanks a lot.

12 Nov 2011, 6:09 PM
Seems like there is no way to write a HTML string to a new window, one opened with Window.open()

The JS equivalent of window.open() returns a handle to the newly created window so U can do stuff like win.document.write() on it, so how do you this in GWT/GXT. One would also think that the RootPanel or Document Class will help, but I think these are for the current page/document.

The issue here is once I have opened a new window (or tab) with Window.open(), how can I write HTML string (likely using a XTemplate) to it.

13 Nov 2011, 1:54 AM
If a native method that you require is not there in GWT/GXT, you can use JSNI to add it to a Java API. Take a look at all the other JSNI methods you and should see how to do it.

15 Nov 2011, 12:13 AM
Thanks a lot, I am doing the porting already and the progress is encouraging. I just need a way to (if possible) replicate the grid's rendering for the "print" view e.g such that cell data are rendered using their GridCellRenderer if one exixts. The problem here is that the API requires passing a ton on "in house" parameters to the cal to renderer.render(). Neither the ColumnConfig nor ColumnModel nor GridView API's provide a simple method one can call the initiate the cell formatting and then return the formatted string. Something like this :

// Just like this gives the Renderer for a column

// We can and should have this too,
// so one can easily obtain a cell's formatted value
String formatted = grid.getColumnModel().getRendereredValue(0);

// If that is not feasible, then this should
formatted = grid.getColumnModel().getRendereredValue(rowIndex, colIndex);

I believe this should be handled at least in GXT 3.x, but for now what can I do ???

19 Nov 2011, 4:18 AM
After fiddling for some time with the API of ColumnModel, ColumnConfig, ColumnData, and GridView I've been able to finally generate a "basic" HTML table with with "rendered" values for a Grid. However I find that I am / will be kinda re-inventing the wheel as far as getting the rendering (as well as things like grouping and group summaries) of data is concerned for the print-able version.

I am basically saying now am wondering how this approach of generating a HTML table so as to print a grid will work for complex grid stuff like grid grouping.29415

23 Nov 2011, 8:16 AM
Hi Chalu,

could you share with us your gxt-printer ?
i'd have to do some gxt grid printing, and i don't want to reinvent the wheel you have already done.


24 Nov 2011, 1:16 AM
Of course I'll share it, although its not finished yet, still scratching my head over this : http://www.sencha.com/forum/showthread.php?156839-Row-amp-Group-actions-for-Grid. Gimme say 2 t0 3 days, is that ok ??

24 Nov 2011, 1:23 AM
well, i don't have any other choice to wait, so do as you can, thanks a lot.