Results 1 to 5 of 5

Thread: Load external content in to panel (sencha touch 2 + cordova)

  1. #1
    Sencha User
    Join Date
    Jun 2015
    Posts
    4
    Answers
    1

    Default Load external content in to panel (sencha touch 2 + cordova)

    Hi all,

    I am building a fairly simple ST2 application for deployment to iOS and Android as a hybrid app, using Cordova. However, I am having some problems opening/displaying external content. I have some ST2 experience, not a great deal, so i may be missing something obvious. There are 2 issues in particular:

    1) I have 3 containers in a card layout (intro, main, web). In the main view there is a list and when the user taps an element in the list, I'd like to load an external URL in to a panel in the 'web' container. Then transition to the web container by setting that as the active item in the card layout. Here is the code for the controller:

    Code:
    Ext.define('MyApp.controller.News', {
        extend: 'Ext.app.Controller',
        
        requires: [
            'MyApp.view.Web'    
        ],
        
        config: {
            refs: {
                nav: 'view-navigation',
                
                // Feed
                feed: 'view-news list'
            },
            control: {
                'feed': {
                    select: function(view, record) {
                        this.getFeed().deselectAll();
                    
                        link = record.get('link');
                        
                        Ext.Ajax.request({
                            url: link,
                            success : function(response) {
                               Ext.getCmp('webpanel').setHtml(response.responseText);
                            },
                            failure : function(response) {  
                                var text = response.responseText;
                                Ext.Msg.alert('Error', text, Ext.emptyFn);            
                            }
                        });
                        
                        this.getNav().setActiveItem(2);
                    }
                }
            }
        },
        
        //called when the Application is launched, remove if not needed
        launch: function(app) {
        }
    });
    However, the problem is that the external site references all it's assets (images, videos, css etc.) relatively. So, I can access the external site ok but all of the assets are linked as so...

    ./images/.........../animage.jpg

    Therefore, when the page loads its expecting to find the assets here...

    file://./images/.........../animage.jpg

    I guess all the URLs are relative to my site which is hosted at file://, due to the native build environment. Unforunately, I have no control over the external site, so changing them relative URLs to absolute is not an option.
    At the moment, I am just testing this in the browser (opening using index.html) but I assume the issue will be the same on device (correct me if I'm wrong). Ideally, the client would like the external site to open in the app.
    Any ideas?? I am aware that I may be able to open the site using Ext.Device.device.openURL() but the problem here is that if I require Ext.Device.device - the iOS application will not run (it just gets stuck at the loading dots, with no error message). A bug in the latest version of ST2 IIRC.

    2) And my second issue is, I'd like to include a YouTube video in the application - ideally as part of some html content in a panel. However, when I add the YouTube video using the usual embed iframe method, I cannot play the video on iOS device. The play button touches are not recognised and if I drag the youtube video, it moves the entire application window up and down (this only happens on device, it works fine on desktop browser). I've seen 1 or 2 suggested solutions to similar issues but nothing definite and they were all very old, so open to any ideas.

    Hope you can help!

    Dave

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379
    Answers
    3997

    Default

    Two ways to fix this that I can think of off the top of my head.

    1. User an iframe instead however you will lose some interactions like scrolling.
    2. Set a base tag in your app
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  3. #3
    Sencha User
    Join Date
    Jun 2015
    Posts
    4
    Answers
    1

    Default

    Thanks for the info mitchellsimoens - At the moment, I've ended up using Cordova's InAppBrowser plugin but I'll give these a try as I'd be interested in loading the content directly in to a panel.Any thoughts on question 2? It be great if I could get the YouTube video to embed inline as part of the rest of the html content but any alternatives would also be good.

  4. #4
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    454
    Answers
    19

    Default Youtube...

    I can help in regards to the Youtube part....I would recommend using Youtube's JSON API if you can. I don't remember having any scrolling issues by doing it that way.

    I don't have my machine at hand with the code I did, but a quick search found this post which may help. The example URL for the JSON feed does not work (Youtube must have changed the API) but there will be another URL you can use. See here

    See here:

    http://www.jbuda.co.uk/2013/03/20/youtube-api-channel-listing-using-jsonp-with-sencha-touch/

    From memory, the way I did it was to setup all the fields I needed in my model, id, video URL, thumbnail, large preview image etc in my model then on itemtap use the set method to set the video onto the next screen. Setting the root correctly so that you can get the nested data into your model was the hardest part if I remember, once you nail that then the rest is easy. If I remember to dig out my code, I'll post some of it here.

    There are a few others around:

    http://training.figleaf.com/tutorials/senchacomplete/chapter2/lesson10/6.cfm

    https://www.slatestudio.com/blog/p/s...-on-the-iphone
    https://github.com/alexkravets/sencha-youtube-videos


    :-)

  5. #5
    Sencha User
    Join Date
    Jun 2015
    Posts
    4
    Answers
    1

    Default

    Thanks digeridoo! I've seen various mentions of using the API instead but no specifics - i'll check it out!

Similar Threads

  1. Load Ext.Panel content from external HTML file [answer]
    By rkstar in forum Sencha Touch 1.x: Q&A
    Replies: 24
    Last Post: 27 Jan 2015, 5:23 AM
  2. Easiest way to load external html content into a view
    By scheid in forum Sencha Touch 2.x: Discussion
    Replies: 2
    Last Post: 3 Feb 2012, 8:42 AM
  3. Replies: 0
    Last Post: 26 Mar 2011, 12:24 PM
  4. how? External content load
    By heidtmare in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 15 Oct 2007, 1:05 PM
  5. Load external TAB content (URL) only once?
    By catnipper in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 15 Aug 2007, 12:22 PM

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
  •