Question

美好的一天。我正在构建一个ExtJS4 Web应用程序。我有一个用户可以填写的表单。我能够对用户输入的数据进行基本的CRUD。我通过允许用户打印表单来添加功能。为实现这一目标，我为form.Panel X-Types编写了一个覆盖。我修改了我在网上找到的代码：

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);
}

我使用延迟函数来确保函数完成其操作，因为有时打印预览失败。

此代码有效，它可以打印出文本字段，标签以及字段集。但是，它根本不会渲染单选按钮。现在，我不确定为什么不这样做。

任何人都可以帮我解决我的问题吗？非常感谢任何帮助，谢谢。

ExtJS 4 - 打印面板不会呈现复选框和单选按钮？

0 个答案: