» Fig Leaf Software Home

We've Got You Covered.

Wednesday, February 26, 2014

Ext JS 4: Printing the contents of an Ext.Panel

If you’re creating a line-of-business application, chances are pretty good that your users will need to print some data generated by your application.
printpanel
As illustrated by the following code snippet, printing the contents of an Ext 4 panel is relatively straightforward. The basic algorithm is as follows:
  1. Instantiate a hidden iframe
  2. Dynamically copy the CSS of your app into the iFrame
  3. Dynamically copy the contents of the panel into the iFrame
  4. Call the window.print() method on the iFrame
  5. Destroy the iFrame
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
Ext.define('MyApp.view.override.Panel', {
    override: 'Ext.panel.Panel',
    print: function(pnl) {
        if (!pnl) {
            pnl = this;
        }
        // instantiate hidden iframe
        var iFrameId = "printerFrame";
        var printFrame = Ext.get(iFrameId);
        if (printFrame == null) {
            printFrame = Ext.getBody().appendChild({
                id: iFrameId,
                tag: 'iframe',
                cls: 'x-hidden',
                style: {
                    display: "none"
                }
            });
        }
        var cw = printFrame.dom.contentWindow;
        // instantiate application stylesheets in the hidden iframe
        var stylesheets = "";
        for (var i = 0; i < document.styleSheets.length; i++) {
            stylesheets += Ext.String.format('<link rel="stylesheet" href="{0}" />', document.styleSheets[i].href);
        }
        // various style overrides
        stylesheets += ''.concat(
          "<style>",
            ".x-panel-body {overflow: visible !important;}",
            // experimental - page break after embedded panels
            // .x-panel {page-break-after: always; margin-top: 10px}",
          "</style>"
         );
        // get the contents of the panel and remove hardcoded overflow properties
        var markup = pnl.getEl().dom.innerHTML;
        while (markup.indexOf('overflow: auto;') >= 0) {
            markup = markup.replace('overflow: auto;', '');
        }
        var str = Ext.String.format('<html><head>{0}</head><body>{1}</body></html>',stylesheets,markup);
        // output to the iframe
        cw.document.open();
        cw.document.write(str);
        cw.document.close();
        // remove style attrib that has hardcoded height property
        cw.document.getElementsByTagName('DIV')[0].removeAttribute('style');
        // print the iframe
        cw.print();
        // destroy the iframe
        Ext.fly(iFrameId).destroy();
    }
});
Once you’ve loaded the override, you can simply call the panel.print() method.
Happy coding!
Written by: Steve Drucker
[Cross-promoted on: Druck-I.T.]

No comments:

Post a Comment

About Us

Fig Leaf Software is an award-winning team of imaginative designers, innovative developers, experienced instructors, and insightful strategists.

For over 20 years, we’ve helped a diverse range of clients...

Read More

Contact Us

202-797-7711

Fig Leaf Software

1400 16th Street NW
Suite 450
Washington, DC 20036

info@figleaf.com