Search code examples
javascriptajaxextjsprintingextjs4

Ext.Ux.Printer Print Image doesn't work

i have downloaded the https://github.com/edspencer/Ext.ux.Printer and
import the Printer.js and Base.js

in Base.Js i added the image rendder code:

 Ext.ux.Printer.imageRenderer = Ext.extend(Ext.ux.Printer.BaseRenderer, {
 generateBody: function(image) {
   return String.format("<div class='image-print'>{0}</div>", image.body.dom.innerHTML);
 }
});

Ext.ux.Printer.registerRenderer('image', Ext.ux.Printer.imageRenderer);

this is the place display the image with id displayimage

items: [Printtoolbar,{
xtype : 'image',
id : 'displayimage',
style: {
'display': 'block',
'margin': 'auto'
},
width: 320,
height: 240,
}]

When Pressed Print Button Print The Image

var PrintImgBtn = Ext.getCmp('btnPrint');
    PrintImgBtn.on('click', function(){
        printImg = Ext.getCmp('displayimage');  
        Ext.ux.Printer.print(printImg);

Unfortunately when i pressed the print button,nothing happen.

Solution

  • You can just open a window and print it. In your button handler:

    ...
handler: function() {
    var img = Ext.getCmp('displayimage');
    if(img) {
        var html = img.container.dom.innerHTML;
        var win = window.open();
        win.document.write(html);
        win.print();
        win.close();
    }
}
...

    Example with print: http://jsfiddle.net/wXfFN/3/