ExtJS 4 - 프로그래밍 방식으로 프로그래밍 방식으로 Chrome에서 "인쇄 미리보기 실패"가 표시되는 경우가 있습니다

좋은 하루 되십시오. 웹 응용 프로그램을 개발 중이며 버튼 클릭시 양식을 인쇄 할 부분이 있습니다. 이를 달성하기 위해 필자는 Form Panel의 정의를 무효화하여 필요한 경우 언제든지 코드 내에서 form.print()을 호출 할 수 있습니다. 여기에 내가 내 양식 오버라이드하는 방법입니다 내 웹 응용 프로그램에서 버튼 클릭에 그런ExtJS 4 - 프로그래밍 방식으로 프로그래밍 방식으로 Chrome에서 "인쇄 미리보기 실패"가 표시되는 경우가 있습니다

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

를, 나는 같은 것을 할 :

var form = Ext.getCmp('formIDHere'); 
form.print();

을하지만,이 코드는 시간에 오히려 일치하지 않습니다. 양식을 인쇄 할 때 문제가 없으며 "인쇄 미리보기 오류"메시지가 나타나는 경우가 있습니다. 문제를 일관되게 복제 할 수 없으며 로그에 아무 것도 표시되지 않아 어둠에 빠져 있습니다.

그러나 내가 알아챈 점은 프로젝트를 저장할 때 (Sencha Architect를 사용함) 미리보기 (또는 웹 앱 미리보기에서 현재 창 새로 고침), 웹 app 모든 과정에서 (탭 또는 창을 이동하지 않음을 의미) 인쇄 단추를 누르면 인쇄 미리보기가 나타나고 문제가 없습니다.

지금까지 다른 웹 브라우저에서는 테스트하지 않았습니다. 누구 아이디어? 내가 뭘 잘못하고 있는지 지적 할 수있는 사람에게 정말 감사 할 것입니다. 미리 감사드립니다.

출처

2014-11-05 Razgriz

죄송합니다. 업데이트를 잊어 버렸습니다. 누구든지 내 질문에 대해지지를 표했다.

개념은 간단합니다. 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); 
}

출처

2014-12-11 02:51:33 Razgriz

ExtJS 4 - 프로그래밍 방식으로 프로그래밍 방식으로 Chrome에서 "인쇄 미리보기 실패"가 표시되는 경우가 있습니다

답변

관련 문제