Javascript ExtJS 4-以编程方式打印表单有时会给出；“打印预览失败”；含铬_Javascript_Forms_Extjs_Extjs4_Extjs4.2

Javascript ExtJS 4-以编程方式打印表单有时会给出；“打印预览失败”；含铬

javascript forms extjs extjs4

Javascript ExtJS 4-以编程方式打印表单有时会给出；“打印预览失败”；含铬,javascript,forms,extjs,extjs4,extjs4.2,Javascript,Forms,Extjs,Extjs4,Extjs4.2,你好。我正在开发一个Web应用程序，其中有一部分是我在点击按钮时打印表单的。为了实现这一点，我重写了表单面板的定义，以便在需要时可以调用代码中的任何地方的Form.print（）。以下是我如何改写我的表格： Ext.define('my_app_name.override.form.Panel', { override: 'Ext.form.Panel', print: function(pnl) { if (!pnl) { pnl =

你好。我正在开发一个Web应用程序，其中有一部分是我在点击按钮时打印表单的。为了实现这一点，我重写了表单面板的定义，以便在需要时可以调用代码中的任何地方的

Form.print（）

。以下是我如何改写我的表格：

Ext.define('my_app_name.override.form.Panel', {
    override: 'Ext.form.Panel', 

    print: function(pnl) {
        if (!pnl) {
            pnl = this;
        }

        // instantiate hidden iframe
        var iFrameId = "printerFrame";
        var printFrame = Ext.get(iFrameId);

        if (printFrame === null) {
            printFrame = Ext.getBody().appendChild({
                id: iFrameId,
                tag: 'iframe',
                cls: 'x-hidden',
                style: {
                    display: "none"
                }
            });
        }

        var cw = printFrame.dom.contentWindow;

        // instantiate application stylesheets in the hidden iframe
        var stylesheets = "";
        for (var i = 0; i < document.styleSheets.length; i++) {
            stylesheets += Ext.String.format('<link rel="stylesheet" href="{0}" />', document.styleSheets[i].href);
        }

        // various style overrides
        stylesheets += ''.concat(
            "<style>", 
            ".x-panel-body {overflow: visible !important;}",
            // experimental - page break after embedded panels
            // .x-panel {page-break-after: always; margin-top: 10px}",
            "</style>"
        );

        // get the contents of the panel and remove hardcoded overflow properties
        var markup = pnl.getEl().dom.innerHTML;
        while (markup.indexOf('overflow: auto;') >= 0) {
            markup = markup.replace('overflow: auto;', '');
        }

        var str = Ext.String.format('<html><head>{0}</head><body>{1}</body></html>',stylesheets,markup);

        // output to the iframe
        cw.document.open();
        cw.document.write(str);
        cw.document.close();

        // remove style attrib that has hardcoded height property
        cw.document.getElementsByTagName('DIV')[0].removeAttribute('style');

        // print the iframe
        cw.print();

        // destroy the iframe
        Ext.fly(iFrameId).destroy();
    }
});

然而，这段代码有时相当不一致。有时我可以打印表单，没有问题，有时它会显示“打印预览错误”消息。我无法始终如一地复制这个问题，而且日志也没有显示任何内容，所以我一无所知

然而，我注意到，当我保存我的项目（我正在使用Sencha Architect），预览它（或刷新我预览Web应用的当前窗口），在整个过程中始终使用Web应用（意味着我不移动选项卡或窗口），点击打印按钮，打印预览就会出现，我没有任何问题

到目前为止，我还没有在其他Web浏览器中进行测试。有什么想法吗？我真的很感谢任何能指出我做错了什么的人。提前谢谢。

对不起，我忘了更新这个。多亏了投票支持我的问题的人

这个概念很简单。由于ExtJS4是异步的，所以我将代码放在“块”中，然后延迟对这些函数的调用，以确保它们在继续下一部分之前完成所需的构造

print: function(pnl) {

    if (!pnl) {
        pnl = this;
    }

    // instantiate hidden iframe

    var iFrameId = "printerFrame";
    var printFrame = Ext.get(iFrameId);

    if (printFrame === null) {
        printFrame = Ext.getBody().appendChild({
            id: iFrameId,
            tag: 'iframe',
            cls: 'x-hidden',
            style: {
                display: "none"
            }
        });
    }

    var cw = printFrame.dom.contentWindow;
    var stylesheets = "";
    var markup;
    // instantiate application stylesheets in the hidden iframe



    var printTask = new Ext.util.DelayedTask(function(){
        // print the iframe
        cw.print();

        // destroy the iframe
        Ext.fly(iFrameId).destroy();

    });


    var strTask = new Ext.util.DelayedTask(function(){
        var str = Ext.String.format('<html><head>{0}</head><body>{1}</body></html>',stylesheets,markup);


        // output to the iframe
        cw.document.open();
        cw.document.write(str);
        cw.document.close();

        // remove style attrib that has hardcoded height property
        //             cw.document.getElementsByTagName('DIV')[0].removeAttribute('style');
        printTask.delay(500);

    });

    var markUpTask = new Ext.util.DelayedTask(function(){
        // get the contents of the panel and remove hardcoded overflow properties
        markup = pnl.getEl().dom.innerHTML;
        while (markup.indexOf('overflow: auto;') >= 0) {
            markup = markup.replace('overflow: auto;', '');
        }
        while (markup.indexOf('background: rgb(255, 192, 203) !important;') >= 0) {
            markup = markup.replace('background: rgb(255, 192, 203) !important;', 'background: pink !important;');
        }

        strTask.delay(500);
    });


    var styleSheetConcatTask = new Ext.util.DelayedTask(function(){

        // various style overrides
        stylesheets += ''.concat(
            "<style>", 
            ".x-panel-body {overflow: visible !important;}",
            // experimental - page break after embedded panels
            // .x-panel {page-break-after: always; margin-top: 10px}",
            "</style>"
        );

        markUpTask.delay(500);
    });


    var styleSheetCreateTask = new Ext.util.DelayedTask(function(){


        for (var i = 0; i < document.styleSheets.length; i++) {
            stylesheets += Ext.String.format('<link rel="stylesheet" href="{0}" />', document.styleSheets[i].href);
        }
        styleSheetConcatTask.delay(500);
    });

    styleSheetCreateTask.delay(500);
}

打印：功能（pnl）{
如果（！pnl）{
pnl=这个；
}
//实例化隐藏的iframe
var iFrameId=“printerFrame”；
var printFrame=Ext.get（iFrameId）；
if（printFrame==null）{
printFrame=Ext.getBody（）.appendChild({
id:iFrameId，
标记：“iframe”，
cls:‘x隐藏’，
风格：{
显示：“无”
}
});
}
var cw=printFrame.dom.contentWindow；
var样式表=”；
var加成；
//在隐藏的iframe中实例化应用程序样式表
var printTask=new Ext.util.DelayedTask（函数（）{
//打印iframe
cw.print（）；
//销毁iframe
Ext.fly（iFrameId.destroy（）；
});
var strTask=new Ext.util.DelayedTask（函数（）{
var str=Ext.String.format（'{0}{1}'，样式表，标记）；
//输出到iframe
cw.document.open（）；
cw.文件编写（str）；
cw.document.close（）；
//删除具有硬编码高度属性的样式属性
//cw.document.getElementsByTagName（'DIV'）[0]。removeAttribute（'style'）；
打印任务延迟（500）；
});
var markUpTask=new Ext.util.DelayedTask（函数（）{
//获取面板的内容并删除硬编码溢出属性
markup=pnl.getEl（）.dom.innerHTML；
while（markup.indexOf（'overflow:auto；'）>=0）{
markup=markup.replace（'overflow:auto；'，''）；
}
while（markup.indexOf（'background:rgb（255192203）！important；'）>=0）{
markup=markup.replace（'background:rgb（255192203）！important；'，'background:pink！important；'）；
}
strTask.延迟（500）；
});
var stylesheetconcatask=new Ext.util.DelayedTask（函数（）{
//各种样式替代
样式表+=''.concat(
"", 
“.x-panel-body{溢出：可见！重要；}”，
//实验性-嵌入面板后的分页符
//.x-panel{之后的分页符：始终；页边距顶部：10px}“，
""
);
标记任务延迟（500）；
});
var styleSheetCreateTask=new Ext.util.DelayedTask（函数（）{
for（var i=0；i


print: function(pnl) {

    if (!pnl) {
        pnl = this;
    }

    // instantiate hidden iframe

    var iFrameId = "printerFrame";
    var printFrame = Ext.get(iFrameId);

    if (printFrame === null) {
        printFrame = Ext.getBody().appendChild({
            id: iFrameId,
            tag: 'iframe',
            cls: 'x-hidden',
            style: {
                display: "none"
            }
        });
    }

    var cw = printFrame.dom.contentWindow;
    var stylesheets = "";
    var markup;
    // instantiate application stylesheets in the hidden iframe



    var printTask = new Ext.util.DelayedTask(function(){
        // print the iframe
        cw.print();

        // destroy the iframe
        Ext.fly(iFrameId).destroy();

    });


    var strTask = new Ext.util.DelayedTask(function(){
        var str = Ext.String.format('<html><head>{0}</head><body>{1}</body></html>',stylesheets,markup);


        // output to the iframe
        cw.document.open();
        cw.document.write(str);
        cw.document.close();

        // remove style attrib that has hardcoded height property
        //             cw.document.getElementsByTagName('DIV')[0].removeAttribute('style');
        printTask.delay(500);

    });

    var markUpTask = new Ext.util.DelayedTask(function(){
        // get the contents of the panel and remove hardcoded overflow properties
        markup = pnl.getEl().dom.innerHTML;
        while (markup.indexOf('overflow: auto;') >= 0) {
            markup = markup.replace('overflow: auto;', '');
        }
        while (markup.indexOf('background: rgb(255, 192, 203) !important;') >= 0) {
            markup = markup.replace('background: rgb(255, 192, 203) !important;', 'background: pink !important;');
        }

        strTask.delay(500);
    });


    var styleSheetConcatTask = new Ext.util.DelayedTask(function(){

        // various style overrides
        stylesheets += ''.concat(
            "<style>", 
            ".x-panel-body {overflow: visible !important;}",
            // experimental - page break after embedded panels
            // .x-panel {page-break-after: always; margin-top: 10px}",
            "</style>"
        );

        markUpTask.delay(500);
    });


    var styleSheetCreateTask = new Ext.util.DelayedTask(function(){


        for (var i = 0; i < document.styleSheets.length; i++) {
            stylesheets += Ext.String.format('<link rel="stylesheet" href="{0}" />', document.styleSheets[i].href);
        }
        styleSheetConcatTask.delay(500);
    });

    styleSheetCreateTask.delay(500);
}