ExtJS doesn't have any native method to print content but we can do it easily in the following way -

Lets have a panel with some html content and a print button -

It is better to write the print function in a plugin so that we can use it from different places-

Below is the plugin with the print function (in 'plugin/Printer.js') -

Ext.define("plugin.Printer", {
    statics: {
        print: function(htmlElement,printAutomatically) {
            var win = window.open('', 'Print Panel');

            win.document.open();
            win.document.write(htmlElement.outerHTML);
            win.document.close();

            if (printAutomatically){
                win.print();
            }

            if (this.closeAutomaticallyAfterPrint){
                if(Ext.isIE){
                    window.close();
                } else {
                    win.close();
                }
            }
        }

    }
});

The print function takes the html dom element to print as a parameter.

Now back to our panel. Provided that the id of your panel is myPanelId, Ext.dom.Query.selectNode('#myPanelId-body')  will return the DOM element of the panel body. Call the plugin's print method with passing the DOM element as parameter.

Here is the the handler function -

handler: function(){
                  var html = Ext.dom.Query.selectNode('#myPanelId-body');
                  plugin.Printer.print(html,true);
              }

Dont forget to include the plugin somwhere before using it.

Add new comment