描述一下大概功能需求:从Ext的GridPanel中选择一条记录,将这条记录的详细信息呈现在Ext的Window当中,将Window中呈现的数据按其格式用打印机打印出来。
要处理这个有两种方式:
1.在前台用JavaScript调用打印机打印
2.在后台服务器端处理
由于需求的原因,这里只允许使用第一种方式。想来应该也不难,JavaScript调用一下window.print()(注意:不是Ext.Window),结果失败了。window.print()打印出来的是整个当前浏览器中所呈现的内容,而不是我所要的Ext.Window中的内容。
(突然在想为什么不让每个dom都有print()方法去打印自身中的内容呢?郁闷…)
既然只能打印浏览器window中的,那我把Ext.Window中要打印的内容赋给浏览器的window,不就可以打印了么。
于是乎开始coding…
var win = new Ext.Window({
title: '明细',
width: 600,
height: 400,
buttons: [{
text: '打印',
handler: function(){
//把当前的页面存起来
var c = window.document.body.innerHTML;
//把win中要打印的内容赋给当前浏览器
window.document.body.innerHTML = win.body.dom.innerHTML;
//开始打印
window.print();
//再转回去
window.document.body.innerHTML = c;
}
}]
});先不说打印是否成功,由于整个项目是Ext做的,这样一来回折腾,整个页面直接变成只能看不能操作了,晕倒~再想办法吧。
coding…
var win = window.open('','printer', '');
win.document.body.innerHTML = win.body.dom.innerHTML;
win.print();没问题,可是弹出来了一个窗口,我想能不能把它隐藏起来呢,可是突然又想到弹窗会被某些浏览器拦截,这个方法也放弃。
还有什么办法呢?再次突然想起frame与frame之间如何用JavaScript传值,一个frame中含有一个window对象,那么…
接着coding…
var win = new Ext.Window({
title: '明细',
width: 600,
height: 400,
html: '<iframe />',
buttons: [{
text: '打印',
handler: function(){
var c = win.body.first().dom.innerHTML;
var printer = win.body.last().dom.contentWindow;
printer.document.body.innerHTML = c;
printer.print();
}
}]
});在Ext.Window中用html配置选项创建一个空iframe标签,在Firebug下可以看到html所配置的内容会出现在win.body中且位于最后,win.body是Ext.Element对象,通过它可以取到要打印的内容c和打印机printer(frame中的window),然后赋值,接着打印。
想的好好的,打印出来的竟然和第一个方式一样,⊙﹏⊙b汗
问题出在哪了?难道因为iframe没有获得焦点?printer.print()之前加上printer.focus(),再打印一张出来,搞定!同理也可以打印Ext.Panel等