PDA

View Full Version : Print functionality



lindasingini
6 May 2011, 4:55 AM
Hi All

I recently started using ext js and would like to add some print functionality to my application. I have an image in a window and a print button. When the print button is clicked i would like for the user to be able to print out the image.:-/ Is this possible and if yes please may i have an example.;) Thank you in advance.

fay
6 May 2011, 5:37 AM
Have you looked at Ext.ux.Printer (http://edspencer.net/2009/07/extuxprinter-printing-for-any-ext.html)?

lindasingini
9 May 2011, 3:22 AM
Hi, i looked at the Ext.ux.Printer but it doesnt seem to be quite working.
Am trying to print from an imageviewer which extends the window object. Its printing a blank page. Please see code below.

/////////////////////////ImageViewer//////////////////////////////////


initComponent: function() {
this.bodyCfg = {
tag: 'img',
src: this.src,
xtype:'window'

};
ImageViewer.superclass.initComponent.apply(this, arguments);
},

onRender: function() {
ImageViewer.superclass.onRender.apply(this, arguments);
this.body.on('load', this.onImageLoad, this, { single: true });
},

onImageLoad: function() {
var h = this.getFrameHeight(),
w = this.getFrameWidth();
this.setSize(this.body.dom.offsetWidth + w, this.body.dom.offsetHeight + h);
if (Ext.isIE) {
this.center();
}
},

setSrc: function(src) {
this.body.on('load', this.onImageLoad, this, { single: true });
this.body.dom.style.width = this.body.dom.style.width = 'auto';
this.body.dom.src = src;
},

initEvents: function() {
ImageViewer.superclass.initEvents.apply(this, arguments);
if (this.resizer) {
this.resizer.preserveRatio = true;
}
}
});

/////////////////////////////////Printing//////////////////
Ext.ux.Printer.WindowRenderer = Ext.extend(Ext.ux.Printer.BaseRenderer, {

/**
* Generates the body HTML for the ImageViewer
*/
generateBody: function(ImageViewer) {
var imagePath = this.getPath(ImageViewer);



var htmlString = '<div><img src="' + imagePath + '"/></div>';

return htmlString;
},

/**
returns the path of the image in the imageviewer
*/

getPath: function(ImageViewer) {


var path = ImageViewer.src;

return path;
}

});

Ext.ux.Printer.registerRenderer('window', Ext.ux.Printer.WindowRenderer);


Please help.