如何在OK-ed？
时弹出将打印出组件的“打印”对话框答案 0 :(得分：8)
var targetElement = Ext.getCmp('PrintablePanelId');
var myWindow = window.open('', '', 'width=200,height=100');
myWindow.document.write('<html><head>');
myWindow.document.write('<title>' + 'Title' + '</title>');
myWindow.document.write('<link rel="Stylesheet" type="text/css" href="http://dev.sencha.com/deploy/ext-4.0.1/resources/css/ext-all.css" />');
myWindow.document.write('<script type="text/javascript" src="http://dev.sencha.com/deploy/ext-4.0.1/bootstrap.js"></script>');
myWindow.document.write('</head><body>');
myWindow.document.write(targetElement.body.dom.innerHTML);
myWindow.document.write('</body></html>');
myWindow.print();
将extjs可打印组件写入文档。
答案 1 :(得分：2)
我喜欢Gopal Saini的回答！我采用了他的方法并为我的一个应用程序编写了一个函数。这是代码。在FF和Safari上测试过。没有在IE上试过但它应该可以工作。
print: function(el){
var win = window.open('', '', 'width='+el.getWidth()+',height='+el.getHeight());
if (win==null){
alert("Pop-up is blocked!");
return;
}
Ext.Ajax.request({
url: window.location.href,
method: "GET",
scope: this,
success: function(response){
var html = response.responseText;
var xmlDoc;
if (window.DOMParser){
xmlDoc = new DOMParser().parseFromString(html,"text/xml");
}
else{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.loadXML(html);
}
win.document.write('<html><head>');
win.document.write('<title>' + document.title + '</title>');
var xml2string = function(node) {
if (typeof(XMLSerializer) !== 'undefined') {
var serializer = new XMLSerializer();
return serializer.serializeToString(node);
} else if (node.xml) {
return node.xml;
}
}
var links = xmlDoc.getElementsByTagName("link");
for (var i=0; i<links.length; i++){
win.document.write(xml2string(links[i]));
}
win.document.write('</head><body>');
win.document.write(el.dom.innerHTML);
win.document.write('</body></html>');
win.print();
},
failure: function(response){
win.close();
}
});
}
答案 2 :(得分：2)
答案 3 :(得分：2)
您还可以将要打印的组件添加到Ext.window.Window，并将模态属性设置为true，然后打开一个标准打印对话框，该对话框仅打印所需的组件。
ID Day Count Count_group
1001 1933 6 11
1002 1933 6 11
1003 1933 6 11
1004 1933 6 11
1005 1933 6 11
1006 1933 6 11
1007 1932 5 11
1008 1932 5 11
1009 1932 5 11
1010 1932 5 11
1011 1932 5 11
1007 1932 5 8
1008 1932 5 8
1009 1932 5 8
1010 1932 5 8
1011 1932 5 8
1012 1931 3 8
1013 1931 3 8
1014 1931 3 8
1012 1931 3 4
1013 1931 3 4
1014 1931 3 4
1015 1930 1 4
1015 1930 1 1
1016 1800 6 10
1017 1800 6 10
1018 1800 6 10
1019 1800 6 10
1020 1800 6 10
1021 1800 6 10
1022 1799 4 10
1023 1799 4 10
1024 1799 4 10
1025 1799 4 10
1022 1799 4 6
1023 1799 4 6
1024 1799 4 6
1025 1799 4 6
1026 1798 2 6
1027 1798 2 6
1026 1798 2 2
1027 1798 2 2
1028 888 4 6
1029 888 4 6
1030 888 4 6
1031 888 4 6
1032 887 2 6
1033 887 2 6
1032 887 2 3
1033 887 2 3
1034 886 1 3
1034 886 1 2
1035 885 1 2
1035 885 1 1
答案 4 :(得分：1)
在ExtJS中打印并不简单。我可以在Sencha architect's blog上找到我在制作可打印组件时找到的最佳资源。该文章介绍了如何为组件设置自定义打印渲染器，以及有关打印的其他详细信息。但是，此信息适用于ExtJS 3.x; ExtJS 4可能使打印更容易。
答案 5 :(得分：0)
要考虑的另一个选择是将组件渲染为图像或pdf。虽然弹出窗口/打印选项很好，但某些浏览器无法正确打印。他们倾向于忽略背景图像，某些css属性等。为了使组件完全按照它在弹出窗口中的显示方式进行打印，我最终编写了一些服务器端代码，将html转换为图像。
这是客户端代码的样子：
print: function(el){
var waitMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});
waitMask.show();
//Parse current url to set up the host and path variables. These will be
//used to construct absolute urls to any stylesheets.
var currURL = window.location.href.toString();
var arr = currURL.split("/");
var len = 0;
for (var i=0; i<arr.length; i++){
if (i<3) len+=(arr[i].length+1);
}
var host = currURL.substring(0, len);
if (host.substring(host.length-1)=="/") host = host.substring(0, host.length-1);
var path = window.location.pathname;
if (path.lastIndexOf("/")!=path.length-1){
var filename = path.substring(path.lastIndexOf("/")+1);
if (filename.indexOf(".")!=-1){
path = path.substring(0, path.lastIndexOf("/")+1);
}
else{
path += "/";
}
}
//Start constructing an html document that we will send to the server
var html = ('<html><head>');
html += ('<title>' + document.title + '</title>');
//Insert stylesheets found in the current page. Update href attributes
//to absolute URLs as needed.
var links = document.getElementsByTagName("link");
for (var i=0; i<links.length; i++){
var attr = links[i].attributes;
if (attr.getNamedItem("rel")!=null){
var rel = attr.getNamedItem("rel").value;
var type = attr.getNamedItem("type").value;
var href = attr.getNamedItem("href").value;
if (href.toLowerCase().indexOf("http")!=0){
if (href.toString().substring(0, 1)=="/"){
href = host + href;
}
else{
href = host + path + href;
}
}
html += ('<link type="' + type + '" rel="' + rel+ '" href="' + href + '"/>');
}
}
html += ('</head><body id="print">');
html += (el.dom.innerHTML);
html += ('</body></html>');
//Execute AJAX request to convert the html into an image or pdf -
//something that will preserve styles, background images, etc.
//This, of course, requires some server-side code. In our case,
//our server is generating a png that we return to the client.
Ext.Ajax.request({
url: "/WebServices/Print?action=submit",
method: "POST",
rawData: html,
scope: this,
success: function(response){
var url = "/WebServices/Print?action=pickup&id="+response.responseText;
window.location.href = url;
waitMask.hide();
},
failure: function(response){
win.close();
waitMask.hide();
var msg = (response.responseText.length>0 ? response.responseText : response.statusText);
alert(msg);
}
});
}
同样，这需要一些服务器端魔术将html转换为图像。就我而言，我实施了“打印”服务。客户通过“提交”操作提交作业请求，并通过“提取”操作检索输出产品。
为了将html转换为图像，我最终使用了一个名为Web Screen Capture的免费命令行应用程序。它只适用于Windows，我不知道它是如何可扩展的，所以使用风险。