1. #1
    Sencha User
    Join Date
    Oct 2011
    Location
    The Netherlands
    Posts
    23
    Vote Rating
    0
    mw1990 is on a distinguished road

      0  

    Default Answered: Add pdf to a panel

    Answered: Add pdf to a panel


    Hey,

    Im trying to add a pdf file to a panel. My code looks like this now:
    Code:
    subjectpanel = new Ext.Panel({
            floating: true,
            scroll: 'both',
                modal: true,
                    centered: true,
                width: '90%',
                height: '90%',
                html: '<iframe width="100%" height="100%" src="data/pdf/subject3.1.pdf" ></iframe>'
        });
    So, in Chrome everything works fine, in safari the files are downloaded to the pc and in the ipad simulator it wont render.

    I have tried a solution I found on the forum, this involved google docs. This is not the best option because the app is going to get used offline alot.

    Thanks in advance.

  2. Quote Originally Posted by mw1990 View Post
    So there is no standarized code to handle a pdf in Sencha?
    It's not up to Sencha Touch whether or not the browser is capable of displaying a PDF document... it's up to the browser.

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,327
    Answers
    3540
    Vote Rating
    850
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    It's up to the mobile device on how it handles PDF.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    Oct 2011
    Location
    The Netherlands
    Posts
    23
    Vote Rating
    0
    mw1990 is on a distinguished road

      0  

    Default


    So there is no standarized code to handle a pdf in Sencha?

  5. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,327
    Answers
    3540
    Vote Rating
    850
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Quote Originally Posted by mw1990 View Post
    So there is no standarized code to handle a pdf in Sencha?
    It's not up to Sencha Touch whether or not the browser is capable of displaying a PDF document... it's up to the browser.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  6. #5
    Sencha User armode's Avatar
    Join Date
    Nov 2011
    Location
    Germany / Darmstadt
    Posts
    64
    Vote Rating
    4
    armode is on a distinguished road

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    It's not up to Sencha Touch whether or not the browser is capable of displaying a PDF document... it's up to the browser.
    Of course, that's right, but the iPhone Browser is able to display PDFs for example if you call window.open(PDF)!
    Everything works fine, pinch/zoom, rendering, ... But how to get this work inside a panel?
    There is a workaround to use an iFrame, but then you have trouble with scrolling, zooming, etc. Here's a working example for an iFrame
    I tried to use this code inside a panel, but it doesn't work:

    Code:
            var panel = new Ext.Panel({
                id: 'PDFPanel',
                layout: 'fit',
                scroll: 'both',
                html: '<div id="scroller" style="height: 500px; width: 100%; overflow: auto;"><iframe height="100%" id="iframe" scrolling="no" width="100%" id="iframe" src="URL" /></div>',
                listeners: {
                    beforeshow: function() {
                                setTimeout(function () {
                                  var startY = 0;
                                  var startX = 0;
                                  var b = document.body;
                                  alert('Body added!');
                                  b.addEventListener('touchstart', function (event) {
                                      parent.window.scrollTo(0, 1);
                                      startY = event.targetTouches[0].pageY;
                                      startX = event.targetTouches[0].pageX;
                                  });
                                  b.addEventListener('touchmove', function (event) {
                                    event.preventDefault();
                                    var posy = event.targetTouches[0].pageY;
                                    var h = parent.document.getElementById("scroller");
                                    var sty = h.scrollTop;
    
    
                                    var posx = event.targetTouches[0].pageX;
                                    var stx = h.scrollLeft;
                                    h.scrollTop = sty - (posy - startY);
                                    h.scrollLeft = stx - (posx - startX);
                                    startY = posy;
                                    startX = posx;
                                  });
                                }, 1000);
                    }
                }
            });
    I would appreciate your help!

  7. #6
    Sencha User
    Join Date
    Oct 2011
    Location
    The Netherlands
    Posts
    23
    Vote Rating
    0
    mw1990 is on a distinguished road

      0  

    Default pdf on mobile devices

    pdf on mobile devices


    Hey,

    I fixed it with two solutions, one for chrome and 1 for safari. For chrome i have an iframe, with the pdf inside it. For safari I have a div with the pdf as an image.

    this is my code:
    Code:
    var pdfurl = [];
      if (App.browser == "Safari") {
        console.log('Safari')
         pdfurl = ['<div class="pdf"><img src="data/pdf/' + target.id + '.pdf" width="100%" /></div>'];
          }else if (App.browser == "Chrome"){
            console.log('Chrome');
            pdfurl = ['<iframe src="data/pdf/' + target.id + '.pdf" width="100%" height="100%"></iframe>'];
    }

  8. #7
    Sencha User armode's Avatar
    Join Date
    Nov 2011
    Location
    Germany / Darmstadt
    Posts
    64
    Vote Rating
    4
    armode is on a distinguished road

      0  

    Default


    Thanks for your reply!

    But pinch to zoom doesn't work, right?

  9. #8
    Sencha User
    Join Date
    Dec 2011
    Posts
    6
    Vote Rating
    0
    youmi is on a distinguished road

      0  

    Default img src .pdf displays only first page

    img src .pdf displays only first page


    Hi everyone,

    I have tried the solution of putting the pdf inside an image tag but on my ipad it only displays the first page of the pdf document.
    Do I need to add something in order to scroll through the whole document.


    Thanks

  10. #9
    Sencha User
    Join Date
    Oct 2011
    Location
    The Netherlands
    Posts
    23
    Vote Rating
    0
    mw1990 is on a distinguished road

      0  

    Default


    You cant scroll. Due to this problem I have implemented the Google Docs PDF viewer. This is a very nice viewer, does all the things the pc version can do.

    Hope this helps

  11. #10
    Sencha User
    Join Date
    Dec 2011
    Posts
    6
    Vote Rating
    0
    youmi is on a distinguished road

      0  

    Default


    My problem is that my application will be used offline and the pdf files will be stored locally.