Printing, performance and architecture

[dyndan]

Hi there,

first of all: ExtJs is great! Everbody around here knows: It is perfect for build dynamic application like user interfaces that run in the browser.

But what about printing, especially printing grids? In this case being dynamic is worthless - you need all the information on your screen before printing.

So performance is everything.

I played around with "Ext.ux.PrinterFriendly" to get a large grid printed.

I like the idea how it works but - building HTML for let's say 1500 rows on the client just takes about 100 times to long....

How do you approach this issue? Currently I think the only chance is to build the HTML serverside. Would a serverside ExtJs template rendering engine be a good idea?

dyndan

[MaximGB]

Just redirect user to server side generated PDF or Excel sheet.

[dyndan]

PDF is a good idea because you get control over page breaks etc...

But: Where do you get the data from how to generate the PDF?

Imagine to print a grid that displays a search result with user chosen columns and sort mode. Now the task is to generate a PDF that shows exactly the same contents as the grid does.

The information to do this is on the client. So the "solution" is to send these to the server. When you've done that, it comes to intepreting those informations serverside and generating the PDF.

Isn't there a framework which could help here? A serverside framework? Generating a grid sort of thing? Couldn't this serve HTML, too?

Why do I have to send the information how to generate the grid from the client to the server again? Didn't they already come from the server? What do I need ExtJs for?

See what I mean? If printing grids is this difficult with ExtJs, this could be the issue not to count on Ext in a production environment.

I'm fighting for Ext in our company right now and I desperatly need arguments in this case.

dyndan

[dyndan]

Hi,

I did some searching and found the following:

http://www.extjs.com/forum/showthread.php?t=19745 (Suggestion: TCPDF)
http://www.extjs.com/forum/showthread.php?t=9442 (Suggestion: Excel Spreadsheet)

Basically, serverside processing is suggested to generate different output (PDF/Excel) than a normal "ExtJs-implemented-client" would take.

So the advice is: Do not use ExtJs for generating printable layouts, right? That's tough. Cause in this case, you need different/more advanced technologies serverside than just for producing XML/JSON to communicate with Ext.

If you want to achieve a printable grid layout let's say as PDF that follows the current screen layout of that grid - there's quite a lot of work to do...

[Animal]

It's not as bad as you might think if you use Java.

You can use FOP: http://xmlgraphics.apache.org/fop/

to produce PDF based upon an XSL-FO document: http://www.w3.org/TR/2001/REC-xsl-20011015/

The XSL-FO definition is a little complex, but essentially there are <table>, <row> and <cell> elements which make up the main bulk of what you'd need to get a Grid printed.

So you just need an XSL transformation which gets you from your internal XML data format (And if you don't have one, you can use SAX to get there) into XSL-FO.

So, for instance to get this: http://i131.photobucket.com/albums/p286/TimeTrialAnimal/simplegridaspdf.jpg

I had to generate the following XML document:




<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
<fo:layout-master-set>
<fo:simple-page-master master-name="repeating" margin-top="1cm" margin-bottom="1cm" margin-left="1cm" margin-right="1cm" page-width="21cm" page-height="29.7cm">
<fo:region-body margin-bottom="0.75cm" margin-top="1.25cm" margin-left="7.43612cm"/>
<fo:region-before extent="1.25cm"/>
<fo:region-after extent="0.75cm"/>
</fo:simple-page-master>
<fo:page-sequence-master master-name="repeating_pm">
<fo:repeatable-page-master-reference maximum-repeats="no-limit" master-reference="repeating"/>
<fo:single-page-master-reference master-reference="repeating"/>
</fo:page-sequence-master>
</fo:layout-master-set>
<fo:page-sequence initial-page-number="1" master-reference="repeating_pm">
<fo:static-content flow-name="xsl-region-before">
<fo:block space-after="1mm" font-weight="bold" text-decoration="underline" font-size="15pt" text-align="center">Language List</fo:block>
<fo:block space-after="5mm" font-weight="normal" font-size="10pt" text-align="center">Generated by Aspicio on 11-Jun-2008</fo:block>
</fo:static-content>
<fo:static-content flow-name="xsl-region-after">
<fo:block line-height="14pt" font-family="sans-serif" font-size="10pt" space-before="2.5mm" text-align="center">Page
<fo:page-number/>
</fo:block>
</fo:static-content>
<fo:flow flow-name="xsl-region-body">
<fo:block font-size="10pt">
<fo:table border-collapse="collapse" table-layout="fixed" width="114pt">
<fo:table-column column-width="37pt"/>
<fo:table-column column-width="77pt"/>
<fo:table-header>
<fo:table-row background-color="#C3DAF9">
<fo:table-cell border="1pt solid lightgrey">
<fo:block text-align="center" font-weight="bold">Code</fo:block>
</fo:table-cell>
<fo:table-cell border="1pt solid lightgrey">
<fo:block text-align="center" font-weight="bold">Name</fo:block>
</fo:table-cell>
</fo:table-row>
</fo:table-header>
<fo:table-body>
<fo:table-row background-color="#E2ECF8">
<fo:table-cell border="1pt solid lightgrey">
<fo:block text-align="left" margin-left="4pt">AG</fo:block>
</fo:table-cell>
<fo:table-cell border="1pt solid lightgrey">
<fo:block text-align="left" margin-left="4pt">Argy Bargyese</fo:block>
</fo:table-cell>
</fo:table-row>
<fo:table-row background-color="#E3FFFF">
<fo:table-cell border="1pt solid lightgrey">
<fo:block text-align="left" margin-left="4pt">AR</fo:block>
</fo:table-cell>
<fo:table-cell border="1pt solid lightgrey">
<fo:block text-align="left" margin-left="4pt">Argentinian</fo:block>
</fo:table-cell>
</fo:table-row>
<fo:table-row background-color="#E2ECF8">
<fo:table-cell border="1pt solid lightgrey">
<fo:block text-align="left" margin-left="4pt">EN</fo:block>
</fo:table-cell>
<fo:table-cell border="1pt solid lightgrey">
<fo:block text-align="left" margin-left="4pt">English</fo:block>
</fo:table-cell>
</fo:table-row>
<fo:table-row background-color="#E3FFFF">
<fo:table-cell border="1pt solid lightgrey">
<fo:block text-align="left" margin-left="4pt">ES</fo:block>
</fo:table-cell>
<fo:table-cell border="1pt solid lightgrey">
<fo:block text-align="left" margin-left="4pt">Spanish</fo:block>
</fo:table-cell>
</fo:table-row>
<fo:table-row background-color="#E2ECF8">
<fo:table-cell border="1pt solid lightgrey">
<fo:block text-align="left" margin-left="4pt">FR</fo:block>
</fo:table-cell>
<fo:table-cell border="1pt solid lightgrey">
<fo:block text-align="left" margin-left="4pt">French</fo:block>
</fo:table-cell>
</fo:table-row>
<fo:table-row background-color="#E3FFFF">
<fo:table-cell border="1pt solid lightgrey">
<fo:block text-align="left" margin-left="4pt">IT</fo:block>
</fo:table-cell>
<fo:table-cell border="1pt solid lightgrey">
<fo:block text-align="left" margin-left="4pt">Italiano</fo:block>
</fo:table-cell>
</fo:table-row>
<fo:table-row background-color="#E2ECF8">
<fo:table-cell border="1pt solid lightgrey">
<fo:block text-align="left" margin-left="4pt">PE</fo:block>
</fo:table-cell>
<fo:table-cell border="1pt solid lightgrey">
<fo:block text-align="left" margin-left="4pt">Penguinese</fo:block>
</fo:table-cell>
</fo:table-row>
<fo:table-row background-color="#E3FFFF">
<fo:table-cell border="1pt solid lightgrey">
<fo:block text-align="left" margin-left="4pt">PO</fo:block>
</fo:table-cell>
<fo:table-cell border="1pt solid lightgrey">
<fo:block text-align="left" margin-left="4pt">Polish</fo:block>
</fo:table-cell>
</fo:table-row>
<fo:table-row background-color="#E2ECF8">
<fo:table-cell border="1pt solid lightgrey">
<fo:block text-align="left" margin-left="4pt">TY</fo:block>
</fo:table-cell>
<fo:table-cell border="1pt solid lightgrey">
<fo:block text-align="left" margin-left="4pt">tYRONESE</fo:block>
</fo:table-cell>
</fo:table-row>
</fo:table-body>
</fo:table>
</fo:block>
</fo:flow>
</fo:page-sequence>
</fo:root>


This is an XSL transformation from a very simple internal grid XML definition which looks like



<?xml version="1.0" encoding="UTF-8"?>

<report title="Language List" date="11-Jun-2008" centimetre-width="4.12776" point-width="114.0">
<column point-width="37"/>
<column point-width="77"/>
<header>
<cell type="text">Code</cell>
<cell type="text">Name</cell>
</header>
<row>
<cell type="text">AG</cell>
<cell type="text">Argy Bargyese</cell>
</row>
<row>
<cell type="text">AR</cell>
<cell type="text">Argentinian</cell>
</row>
<row>
<cell type="text">EN</cell>
<cell type="text">English</cell>
</row>
<row>
<cell type="text">ES</cell>
<cell type="text">Spanish</cell>
</row>
<row>
<cell type="text">FR</cell>
<cell type="text">French</cell>
</row>
<row>
<cell type="text">IT</cell>
<cell type="text">Italiano</cell>
</row>
<row>
<cell type="text">PE</cell>
<cell type="text">Penguinese</cell>
</row>
<row>
<cell type="text">PO</cell>
<cell type="text">Polish</cell>
</row>
<row>
<cell type="text">TY</cell>
<cell type="text">tYRONESE</cell>
</row>
</report>