Printing
Experimental new print methods
A print() method has been added to 6.4 for all controls. You can call this.layoutBox1.print() or this.dojoGrid1.print() or print on any panel. This is a very experimental feature but is the easiest way to get basic printing working. Here are some tips on using it:- Currently, you don't have any control over background color; we'll change this in the future, but generally speaking, background colors just burn through ink cartridges
- Currently, the only way to add a border is using a wm.Bevel widget; border styles are ignored
- You will not be able to create a picture perfect copy of your page design; various approximations are made; these will be refined over time, but this rule will remain important to understand.
- Typical web pages are 800-1200px wide. For best results, either hide panels such as your table of contents that adds to the width of your page, or only priint a panel that looks good at 750px width.
- Spacer don't yet work; this will be fixed in 6.5.
- Setting padding and margin generally won't work for adding spacing; use width to change spacing
Print only a single page
If everything you need to print can be fit onto a single printed page, then printing should work well. If this situation describes you, then issues of printing from the framework don't apply to you, your user can just hit the browser's print button and be done with it. There is always room to improve the result; and there are sections below to help with this, but your task is relatively simple.Use third party reporting tools
Rather than trying to force your project to generate printable pages, you can use a third party tool such as Jasper Reports to generate printable reports.Open a new window and pack in some custom Html
You can always implement a print button that does something like this:printButtonClick: function(inSender) {
var win = window.open("");
var doc = win.document;
doc.open("text/html");
doc.write("<html><body onload='window.print()'>");
doc.write(...) // write your html and data
doc.close();
}Iterate through all of your widgets changing layout style
One technique which has been used successfully but is also a lot more work than is recommended: Iterate through every container on your page and change the dom node's position from absolute to static; and remove the height so that there are is no need for printing to manage autoScrolling containers. For example, the following (untested) code might get you closer to a solution:printButtonClick: function(inSender) {
wm.forEachWidget(app._page.root, function(w) {
if (w instanceof wm.Container) {
w.domNode.style.position = "static";
w.domNode.style.height = ""; // let the domNode figure out a height for itself
}
});
// Give the browser time to render the new page before we print it
window.setTimeout(function() {window.print();}, 1);
}An important technique for printing is Print CSS
http://www.alistapart.com/articles/goingtoprint/
on 15/11/2011 at 11:39
