This post originated from an RSS feed registered with Ruby Buzz
by Edward Spencer.
Original Post: Ext.ux.Printer - printing for any Ext Component
Feed Title: Ed's Elite blog
Feed URL: http://feeds2.feedburner.com/EdSpencer
Feed Description: Ruby on Rails development, Git issues and ExtJS/JavaScript
After my recent foray into printing grids with ExtJS, I realised I needed to print some trees too. Seeing as some of the work was already done for the Grid example, it made sense to create a common API for printing any Ext.Component. And thus Ext.ux.Printer was born:
var grid = new Ext.grid.GridPanel({ // just a normal grid }); var tree = new Ext.tree.ColumnTree({ // just a normal column tree });
Each of the above opens a new window, renders some HTML (just a big table really), prints it and closes the window - all client side with no server side code required. Although trees and grids represent data quite differently internally, we can use the same API on Ext.ux.Printer to print them both.
Ext.ux.Printer uses Renderer classes to cope with a specific xtype, and adding Renderers for other components is easy. At the moment Ext.grid.GridPanel and Ext.tree.ColumnTree are supported out of the box, but let's see how we'd add support for printing the contents of an Ext.Panel:
/** * @class Ext.ux.Printer.PanelRenderer * @extends Ext.ux.Printer.BaseRenderer * Prints the contents of an Ext.Panel */ Ext.ux.Printer.PanelRenderer = Ext.extend(Ext.ux.Printer.BaseRenderer, {
/** * Generates the HTML fragment that will be rendered inside the <html> element of the printing window * @param {Ext.Panel} panel The panel to print the contents of * @return {String} The HTML fragment */ generateBody: function(panel) { return String.format("<div class='panel-print'>{0}</div>", panel.body.dom.innerHTML); } });
This is probably the simplest print renderer of all - we're simply grabbing the HTML from inside a the panel's body and returning it inside our own div. We subclassed Ext.ux.Printer.BaseRenderer, and in this case all we needed to do was provide an implementation for generateBody. Whatever this function returns is rendered inside the <body> tag of the newly-opened printing window.
Notice that we registered this renderer for all components with the xtype of 'panel'. Internally, Ext.ux.Printer examines the xtype chain of the component you pass it to print, and uses the first renderer that matches. As many Ext components inherit from Ext.Panel this can function as a catch-all renderer.
Pretty straightforward. You can now print Ext.Panels the same way you'd print a Grid or a Tree. Take a look at the Grid Renderer and the ColumnTree Renderer for examples of rendering more advanced components.
As usual, all of the Ext.ux.Printer source is available on Github, and the README file there contains instructions for installation and usage.
Finally, when the printing window is opened it includes a stylesheet that it expects to find at "/stylesheets/print.css". There is a default print.css stylesheet included with the extension to get you started, and you can specify where to find this stylesheet like this:
Previous Topic
