1. #1
    Ext JS Premium Member
    Join Date
    Mar 2010
    Posts
    227
    Vote Rating
    1
    alphadogg is on a distinguished road

      0  

    Default How does one display PDFs in a panel?

    How does one display PDFs in a panel?


    What are my options for displaying a PDF in one of the panels of a border layout?

    Code:
    CPOPExt.UIObjects.Body = function() {
        return ({
            layout: "border",
            border: false,
            items: [
                {
                region: "north",
                id: "bodyTopContainer",
                layout: "border",
                height: 30,
                border: false,
                items: [{
                            region: "center",
                            id: "bodyTopTitle",
                            border: false,
                            html: "Manage Forms"
                        },
                        {
                            region: "east",
                            id: "bodyTopFunctions",
                            bodyCssClass: "bodyButtonPanel",
                            width: 120,
                            border: false
                        }]
                },
                {
                region: "center",
                layout: "fit",
                id: "BodyCenterContainer",
                items: [CPOPExt.UIObjects.Grid],
                split: true,
                border: false
                },
                {
                region: "south",
                title: "PDF Viewer",
                id: "BodyBottomContainer",
                height: 200,
                border: true,
                split: true,
                collapsible: true,
                collapsed: true
                }
            ]
        });
    };

  2. #2
    Ext JS Premium Member devtig's Avatar
    Join Date
    Jan 2010
    Location
    Rotterdam, The Netherlands
    Posts
    388
    Vote Rating
    13
    devtig will become famous soon enough

      0  

    Default


    I'd say in an iframe using the ux Managed Iframe
    http://www.sencha.com/forum/showthre...agedIFrame-2.x

  3. #3
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    82
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    ux.Media would seem more appropriate, but an IFRAME works too.

  4. #4
    Ext JS Premium Member
    Join Date
    Mar 2010
    Posts
    227
    Vote Rating
    1
    alphadogg is on a distinguished road

      0  

    Default


    Are there pros and cons either way?

  5. #5
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    82
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    ux.Media uses an <object> or <embed> tag that lets you configure the pdf reader (e.g. hide the toolbar).

  6. #6
    Ext JS Premium Member devtig's Avatar
    Join Date
    Jan 2010
    Location
    Rotterdam, The Netherlands
    Posts
    388
    Vote Rating
    13
    devtig will become famous soon enough

      0  

    Default


    Use Chrome browser to go to the ux.Media demo at http://demos.theactivegroup.com/demodesk.html . Then click on the ux.Media button and then Acrobat (PDF) Documents. Then choose the second tab. Chrome than zooms to 10% automatically ...

  7. #7
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    82
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    That's a bug in Chrome or the PDF plugin. You can't really blame ux.Media for that.

  8. #8
    Ext JS Premium Member
    Join Date
    Mar 2010
    Posts
    227
    Vote Rating
    1
    alphadogg is on a distinguished road

      0  

    Default


    Actually, currently using FF3.6.13, the demo for ux.Media opens a PDF in an external instance of Reader. On the left side bar, click the ux.Media little black arrow. Select the PDF option. In IE, the default tab shows a little "missing image" icon and the IFRAMED tab results in a download box and shows in a separate window. In FF, I immediately get a PDF popup with either tab.

    I know FF now has a separate plugin container now for the more popular plugins. This may be playing a role, because this behavior happens at other sites. However, I need to display the PDF inline in the browser. There may not be a way to do this...

    Condor, do you use this extension in actual production use?

  9. #9
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    82
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    This only works if you have the PDF plugin installed in browsers (did you unselect the plugins when installing Acrobat Reader?).

  10. #10
    Ext JS Premium Member
    Join Date
    Mar 2010
    Posts
    227
    Vote Rating
    1
    alphadogg is on a distinguished road

      0  

    Default


    My bad. Turns out the workstation I was using did not actually have Reader's plugins installed, even though it had Adobe Acrobat Standard.

    Once installed, it worked.

Similar Threads

  1. Embed PDFs within a Ext.Panel (.pdb)
    By RandyMcMillan in forum Sencha Touch 1.x: Examples and Showcases
    Replies: 0
    Last Post: 17 Aug 2010, 6:16 PM
  2. Button menus showing behind embedded pdfs?
    By zhegwood in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 10 Dec 2009, 9:17 AM
  3. Sending PDFs to the client. Best Practice?
    By francescoNemesi in forum Ext GWT: Discussion
    Replies: 3
    Last Post: 29 Sep 2009, 8:24 PM
  4. PDFs and AJAX Requests?
    By jpnet in forum Community Discussion
    Replies: 3
    Last Post: 21 Nov 2008, 12:59 PM
  5. Embedding PDFs in iframes
    By Max Carey in forum Ext 2.x: Help & Discussion
    Replies: 8
    Last Post: 13 Jun 2008, 9:00 AM

Thread Participants: 2

Tags for this Thread