From Learn About the Ext JavaScript Library

Contents 1 About 2 Download 3 Installation 4 Usage 5 Supported Browsers

About

This plugin adds a method called Ext.printPreview(). When called it opens a modified Ext.Window. This window contains an iframe. The source of the iframe is the URL of the page you are calling the method from, but it adds the _format=printerfriendly parameter to the query string. If you pass this parameter to your page, the Ext.onPrinting method instead of the Ext.onReady method is executed.

In the onPrinting part you build a page/layout as you would in the onReady method. But it's recommended to use the TableLayout for the Container instead of the Viewport for example.

Moreover, if you use Grids, you should use the PrinterGridPanel which is included in this extension. This PrinterGridPanel builds a plain HTML table and shows all rows. The plain HTML is less memory and cpu consuming for large datasets than the normal GridPanel, since the normal GridPanel includes more view features you don't need on paper.

Important: The print preview window's iframe is making a new request to your Ext JS page, which means your variables and values of your parent page can not be accessed by the printerfriendly page. To preserve the state of your grids, use Ext's state manager with the cookie provider (see example).

Download

See attachments on this forum post.

Installation

1. Put the following javascript links in the HEAD section of your Ext JS Page:

<!-- Your Ext JS files -->
<script type="text/javascript" src="[YOUR PATH]/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="[YOUR PATH]/ext-all.js"></script>

<!-- Ext.ux.PrinterFriendly files -->
<script type="text/javascript" src="[YOUR PATH]/Ext.ux.PrinterFriendly/config.js"></script>
<script type="text/javascript" src="[YOUR PATH]/Ext.ux.PrinterFriendly/init.js"></script>


<!-- Your page-specific javascript files (with Ext.onReady) -->
<script type="text/javascript" src="[YOUR PAGE-SPECIFIC JAVASCRIPT FILE]"></script>

2. Edit /ux.PrinterFriendly/config.js and set the value of Ext.ux.PrinterFriendly.ROOT to your environment.

Usage

Download Ext.ux.PrinterFriendly-Examples-0.2.zip for a working example. See the attachments in this forum post http://extjs.com/forum/showthread.php?p=148443#post148443.

Supported Browsers

Firefox 2, Safari 2+, IE6+