Results 1 to 4 of 4

Thread: [SOLVED]How to print the document on tabpanel

  1. #1
    Sencha User mashiki's Avatar
    Join Date
    Oct 2007
    Location
    Japan
    Posts
    139
    Vote Rating
    0
      0  

    Question [SOLVED]How to print the document on tabpanel

    I want to print the TabPanel.

    For example, I made the following bookmarklet to print the API document.

    Code:
    javascript:var%20s=Ext.getCmp('doc-body').getActiveTab().getEl().select('.body-wrap').first();if(!s)void%20Ext.Msg.alert('DocPrint','Select%20a%20document%20tab.');else{var%20f=Ext.DomHelper.append(document.body,{tag:'iframe',style:'position:absolute;width:400px;height:400px;left:-5px;top:-5px;'}),w=f.contentWindow,d=w.document;Ext.get(document).select('link').each(function(e){if(e.dom.rel.toLowerCase()==='stylesheet'){d.write('<link%20type="text/css"%20rel="stylesheet"%20href="'+e.dom.href+'"></link>');}});d.write('<div%20clas=body-wrap>'+s.dom.innerHTML+'</div>');w.focus();w.print();Ext.get(f).remove()}

    Here it is indented to improve readability

    Code:
    var s = Ext.getCmp('doc-body').getActiveTab().getEl().select('.body-wrap').first();
    if (!s) void Ext.Msg.alert('DocPrint', 'Select a document tab.');
    else {
        var f = Ext.DomHelper.append(document.body, {
            tag: 'iframe',
            style: 'position:absolute;width:400px;height:400px;left:-5px;top:-5px;'
        }),
            w = f.contentWindow,
            d = w.document;
        Ext.get(document).select('link').each(function(e) {
            if (e.dom.rel.toLowerCase() === 'stylesheet') {
                d.write('<link type="text/css" rel="stylesheet" href="' + e.dom.href + '"></link>');
            }
        });
        d.write('<div clas=body-wrap>' + s.dom.innerHTML + '</div>');
        w.focus();
        w.print();
        Ext.get(f).remove()
    }
    Printing the target page is possible. But, it print only the first page.
    In order to be able to print a long document, what should I do?
    Last edited by mashiki; 22 Jan 2011 at 2:18 PM. Reason: SOLVED

  2. #2
    Sencha User mashiki's Avatar
    Join Date
    Oct 2007
    Location
    Japan
    Posts
    139
    Vote Rating
    0
      0  

    Default

    Now I found the cause of this trouble.
    The cause is that a style of "overflow:hidden;" is specified in doc.css.
    This is the repaired version bookmarklet.
    However, this doesn't reflect "Hide Inherited Members" and "Expand All Members"

    Code:
    javascript:var%20p=Ext.getCmp('doc-body').getActiveTab(),s=p.getEl().select('.body-wrap',true).first();if(!s)void%20Ext.Msg.alert('DocPrint','Select%20a%20document%20tab.');else{var%20f=Ext.DomHelper.append(document.body,{tag:'iframe',style:'position:absolute;width:4px;height:4px;left:-5px;top:-5px;'}),w=f.contentWindow,d=w.document;Ext.get(document).select('link').each(function(e){if(e.dom.rel.toLowerCase()==='stylesheet'){d.write('<link%20type="text/css"%20rel="stylesheet"%20href="'+e.dom.href+'"></link>');}});d.write('<style>html,body{overflow:auto}</style><div%20clas=body-wrap>'+s.dom.innerHTML+'</div>');d.close();d.title=document.title+':'+p.title;w.focus();w.print();Ext.get(f).remove()}
    indented code
    Code:
    var p = Ext.getCmp('doc-body').getActiveTab(),
        s = p.getEl().select('.body-wrap', true).first();
    if (!s) void Ext.Msg.alert('DocPrint', 'Select a document tab.');
    else {
        var f = Ext.DomHelper.append(document.body, {
            tag: 'iframe',
            style: 'position:absolute;width:4px;height:4px;left:-5px;top:-5px;'
        }),
            w = f.contentWindow,
            d = w.document;
        Ext.get(document).select('link').each(function(e) {
            if (e.dom.rel.toLowerCase() === 'stylesheet') {
                d.write('<link type="text/css" rel="stylesheet" href="' + e.dom.href + '"></link>');
            }
        });
        d.write('<style>html,body{overflow:auto}</style><div clas=body-wrap>' + s.dom.innerHTML + '</div>');
        d.close();
        d.title = document.title + ':' + p.title;
        w.focus();
        w.print();
        Ext.get(f).remove()
    }

  3. #3
    Sencha User
    Join Date
    Nov 2010
    Posts
    1
    Vote Rating
    0
      0  

    Default

    this code cannot print in Internet Explorer.
    how to solve this problem?

  4. #4
    Sencha User mashiki's Avatar
    Join Date
    Oct 2007
    Location
    Japan
    Posts
    139
    Vote Rating
    0
      0  

    Default

    I can print in my IE8 and FireFox.

    What version is your IE?
    Do any errors appear to your browser?

Similar Threads

  1. Replies: 4
    Last Post: 28 Sep 2011, 12:57 AM
  2. Print the document
    By Enew in forum Ext 3.x: Help & Discussion
    Replies: 7
    Last Post: 25 Jul 2010, 10:31 AM
  3. unable to print entire page using print button
    By shriyansp in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 19 Feb 2009, 11:02 PM
  4. Unable to display/print the data from DB in tabpanel
    By sriraj in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 30 Nov 2008, 5:29 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •