Fitlayout and window.print() doesn't print all the web page data, but only the visible browser part.

  1. #1

    Fitlayout and window.print() doesn't print all the web page data, but only the visible browser part.

    Hi Ext.NET,

    I've got a problem when i try to print preview or print the data of a web page that is inside an <ext:FitLayout> object and where the data to display is longer then the window browser height.

    In the web page, I can see a scroll bar and all the data correctly, but when i try to print it (with a Listeners:
    <Click Handler="window.print();" />
    ) , only the data inside the browser height is printed and not all the data that the <ext:FitLayout> contain.

    When i use other form of layout, the print preview or print work fine, but the web page scroll bar doesn't appear and thus, the user can't see all the data on the web page.

    I don't intend to "patch" this by creating another web page with all the same object without the <ext:FitLayout>.

    So i was wondering: how can i print all the data that the <ext:FitLayout> contain.

    Thanks for the help ! (n_n)'

    I attached 3 images:

    • The code summery
    • The data display
    • The print preview display.
    Attached Thumbnails Click image for larger version. 

Name:	printpreview.png 
Views:	545 
Size:	88.8 KB 
ID:	2204   Click image for larger version. 

Name:	beforeprint.jpg 
Views:	515 
Size:	92.0 KB 
ID:	2205   Click image for larger version. 

Name:	code.png 
Views:	383 
Size:	25.0 KB 
ID:	2207  
  2. #2

    Hello ? привет ?

    Hello ?

    Is there someone to help me ? Thank you.


    привет ?

    Есть ли кто-то, чтобы помочь мне? Спасибо.
  3. #3
    Hi,

    Don't worry about language, we all know English:)

    Well, I think you should be able to find a solution via Google with request like "print a div with scrolling".

    For example,
    http://www.velocityreviews.com/forum...lling-div.html
  4. #4
    Hi !

    I tried the "overflow:visible; height:auto;" on the StyleSpec and the Cls property of the <ext:FitLayout> object, but I still have the same problem :S

    It seem that even if the CSS specification like: height is at 100% or the overflow is visible, the data is blocked to the display of the <ext:FitLayout> and not the whole data that it contain. I can see that if i do Overflow: scroll, or visible or auto, it will change the print preview in function of the height that the <ext:Fitlayout> display in the browser, but once again not the whole data it contains. It's not acting like a <div> since it's a <ext:FitLayout>, even if your point was a good one.

    I tried to search for a height property on the <ext:FitLayout> but i didn't found one :S

    Do you have other solution in mind concerning the <ext:FitLayout> ?

    Thanks for the reply by the way,
    Спасибо за ответ по пути,

    Romston (n_n)
    Last edited by Romston; Jan 26, 2011 at 6:55 PM.
  5. #5
    Hi,

    FitLayout is a layout manager and belongs to a container (for example, a Panel). Layout manager controls width and height of container's children. So, don't set to Layout control height of styles.

    As far as I can understand these css rules must be applied to a container with scrolling.
  6. #6
    Hi,

    well I patched my problem by using the javascript method: "document.getElementById()". So I putted a <div id="ZoneImpression"> </div> inside the body of the <ext:FitLayout> to include inside the zone i wanted to print and i called the "document.getElementById()".

    In the header of the new page I called the Coolite css and the coolite.axd to print the page correctly with all the Coolite design graphic.

    You can close this tread then.

    Thanks for your support,

    Romston (n_n)



    Here's the method i created in javascript:


    function VersionImprimable(labelProduit, titre)
    {
        var maZoneDiv = document.getElementById("ZoneImpression");
    
        if (maZoneDiv.innerHTML != "")
         {
            var fenetreImpression = window.open("", "");
            fenetreImpression.document.write(
                '<html> \n' +
                '<head id="HeadPrint"> \n' +
                '   <link href="Styles/Coolite.css" rel="stylesheet" type="text/css" />  \n' +
                '   <link href="Styles/RepertoireCTQ.css" rel="stylesheet" type="text/css" /> \n' +
                '   <link rel="stylesheet" type="text/css" href="/RepertoireCTQ/extjs/resources/css/ext-all-embedded-css/coolite.axd?v=983" /> \n' +
                '</head> \n' +
                '<body>  \n' +
                '   <div id="EnteteCTQ" style="overflow: hidden; height:78px ;"> \n' +
                '      <div id="logo" style="float: right; text-align: right;">  \n' +
                '         <img alt="Logo INSPQ" src="Images/bannierelogo.gif" float="left" ALIGN=ABSMIDDLE />  \n' +
                '      </div>  \n' +
                '      <div id="TitreProduit" style="float: left; text-align: left; font:28px arial, helvetica, sans-serif !important;">  \n' +
                '         ' + labelProduit.html + ' \n' +
                '        <font size="3" style="margin-left : 5em;">          ' + titre + '</font> \n' +
                '      </div>  \n' +
                '   </div>  \n' +
                '   <div> \n' +
    
                         maZoneDiv.innerHTML +
    
                '   </div> \n' +
                '<div id="footer">  \n' +
                '   <center>  \n' +
                '      Répertoire des analyses; Réalisé par le Service du développement et de l\'évolution des systèmes d\'information<br />  \n' +
                '      Environnement: Préproduction. <%--<asp:Label ID="lVersion" runat="server"></asp:Label><br />--%> <br />  \n' +
                '      <a href="http://www.inspq.qc.ca" target="_blank">Institut national de santé publique du Québec (INSPQ)</a>  \n' +
                '      <a href="http://www.droitauteur.gouv.qc.ca/copyright.php" target="_blank">© Gouvernement du Québec</a> (2011)  \n' +
                '   </center>  \n' +
                '</div>  \n' +
                '</body>  \n' +
                '</html> \n');
    
            fenetreImpression.document.close();
            fenetreImpression.focus();
            fenetreImpression.print();
        }
    }
  7. #7
    Thank you for the update.

    I would suggest you to use ExtJS API anywhere where possible instead of using pure DOM functionality.
    http://dev.sencha.com/deploy/dev/doc...ss=Ext.Element
    http://dev.sencha.com/deploy/dev/doc...=Ext.DomHelper
    http://dev.sencha.com/deploy/dev/doc...s=Ext.DomQuery

    At least, you will get a cross-browser.

Similar Threads

  1. [CLOSED] How to Print PDF Document from web page?
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Aug 08, 2012, 5:10 AM
  2. [CLOSED] How I print ext:Window content?
    By supera in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Feb 29, 2012, 4:00 PM
  3. [CLOSED] How to print gridpanel with data?
    By Suntico in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Aug 08, 2011, 6:19 PM
  4. [CLOSED] [1.0] Print Window Contents
    By MP in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Sep 22, 2010, 8:18 PM
  5. [CLOSED] Print a Window
    By rthiney in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Jun 01, 2010, 10:30 PM

Tags for this Thread

Posting Permissions