2016-07-28 8 views
0

私はextjsモーダルウィンドウを持っています。私はウィンドウの内容を印刷するためにモーダルに印刷ボタンを置いています。いくつか私は他の設定プロパティとそれを整列させることができません。ここに私のコードです。印刷ボタンは常に に付属しているiamge Attached imageを参照してください。他の設定プロパティと一緒にextjsモーダルウィンドウに印刷ボタンアイコンを配置する方法

印刷ボタンをモーダルヘッダーに合わせる方が良いでしょうか?

var modal = function(Exturl) { 
var ImageModalWin = new Ext.Window(
     { 
      modal : true, 
      border : false, 
      plain : true, 
      maximizable : true, 
      scrollable : true, 
      monitorResize : true, 
      items : { 
       xtype : 'button', 
       iconCls : 'fa fa-print', 
       iconMask : true, 
       listeners : { 
        click : function() { 
         var divToPrint = document.getElementById('imgId'); 
         var newWin = window.open('', 'Print-Window'); 

         newWin.document.open(); 

         newWin.document 
           .write('<html><body onload="window.print()">' 
             + divToPrint.innerHTML 
             + '</body></html>'); 
         newWin.document.close(); 

         setTimeout(function() { 
          newWin.close(); 
         }, 10); 

        } 
       } 

      }, 
      html : '<div id="imgId" class="to-print" style="width:100%;height:100%;"><center><img src="' 
        + url + '"></center></div>', 
      resizable : { 
       preserveAspectRatio : true 
      } 
     }); 
ImageModalWin.show(); 

}

答えて

1

itemsのすべては、コンテンツ領域には常に表示され、ウィンドウのヘッダー領域には表示されません。 header設定のitems設定にオブジェクトを追加すると、その設定がヘッダに追加され、そこにtoolsプロパティの内容も追加されます。

最終的には、ヘッダーに印刷「ボタン」を追加する組み込み(ExtJS)の方法があり、ExtJSを検索したときに遭遇する(唯一の結果として) 6.0.1 classic)docs for "print"

それを試してみてください。

xtype:'window', 
tools:[{ 
    type:'print', 
    handler:function() { 
     ... 
    } 
}] 
+0

おかげで多くのことを:) – divein

関連する問題