1. #1
    Ext User
    Join Date
    Aug 2010
    Posts
    29
    Vote Rating
    0
    olin is on a distinguished road

      0  

    Default Problems with iFrame Sencha Touch, Android and iPad???

    Problems with iFrame Sencha Touch, Android and iPad???


    Aloha all,

    I set up a mobile app to load up content from our site via iFrame. Works great except I can't scroll the iFrame content.

    Here is a snippet of the code I used. What is happening is the iframed content on Android 2.1 won't scroll up or down. On the iPad, same behavoir. Iframe "pages" won't scroll up and down JUST in the iframed space. On the iPad if the iframe content is longer than the space allocated, the bottom buttons that are docked on the bottom become unusable.

    Any ideas on how to bring in iframe content and have just that section scroll indepenent of docked items?

    Thanks! Olin

    Code:
    		var tabpanel = new Ext.TabPanel({
    			tabBar: {
    				dock: 'bottom',
    				scroll: 'horizontal',
    				layout: {
    					pack: 'center'
    				}
    			},
    			fullscreen: true,
    			ui: 'dark',
    			animation: {
    				type: 'slide'
    			},
    			defaults: {
    				scroll: 'vertical',
    			},
    			items:[
    				{
    					title: 'The Latest',
    					html: '<iframe src =\"http://www.kanuhawaii.org/mobileapi/feed/\" width=\"100%\" height=\"100%\"></iframe>',
    					id: 'feedTab',
    					iconCls: 'team',
    					cls: 'settings'
    					// listeners: {added: getFeed}
    				},

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,000
    Vote Rating
    650
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Ext User
    Join Date
    Aug 2010
    Posts
    29
    Vote Rating
    0
    olin is on a distinguished road

      0  

    Default


    Thanks Evan. I should have provided more detail. I tried every iframe scrolling attribute within the HTML tag and also as CSS scrolling attributes on both the sencha touch main index.html and the iframed content HTML. It seems that whenever I have iframe content, even iframe content with just one word, the docking system fails. When I click on tabs that don't contain iframe content, it works find. But clicking to a tab that has iframe content always results in the docking (top and bottom) to move with the click and drag. In Chrome, I can at least use my mouse wheel to move through the iframed content and it scrolls just fine, or if I click and drag near the very edges of the iframed content (left and right) then I can get the move up and down feature to work (though not scrolling).

    Evan, do you have an example of using an iframe where the contents of the iframe where you can click and drag up and down to scroll through content? I can provide screen shots of the issues or vid caps of the issue if needed (Android, Chrome, iPhone, iPad).

    Thanks! Once I get this iframe thing worked out, boy it will be extremely easy to create mobile apps with Sencha Touch!!!

  4. #4
    Ext User
    Join Date
    Aug 2010
    Posts
    29
    Vote Rating
    0
    olin is on a distinguished road

      0  

    Default


    Hi Evan, here is a quick screen cast of the behavoir in Chrome. On an Android device, the contents including the docked panels move with the iframed content up and down.

    Any ideas? Thanks a million. Really do appreciate your help.

    http://screencast.com/t/Y2JlNTMzMmMt

  5. #5
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,000
    Vote Rating
    650
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Try removing this from the css:

    Code:
    ::-webkit-scrollbar {
      width: 6px;
      height: 6px; }
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  6. #6
    Ext User
    Join Date
    Aug 2010
    Posts
    29
    Vote Rating
    0
    olin is on a distinguished road

      0  

    Default


    Thanks Evan. That adds the scroll bars to Chrome but ios and Android still behave the same way...the entire page moves up and down and I can't scroll through the iframed content.

    Is this just something that won't work with Sencha Touch, iframing content? Shucks if yes...would have made robust app development amazingly simple, then I'll move back to bringing in data via JSONP.

  7. #7
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,000
    Vote Rating
    650
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    I tested it on my iPad and the scrolling behaviour seemed fine, as you would expect in an iframe.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  8. #8
    Ext User
    Join Date
    Aug 2010
    Posts
    29
    Vote Rating
    0
    olin is on a distinguished road

      0  

    Default


    Thanks. From what I can tell when using an iframe, if a user tries to swipe up and down to scroll, the whole page moves (not expected behavior if rest of app behaves like this). If the user swipes by the iframe scroll bars, the iframed section moves. This would make an inconsistent interface for users and I'll stick to non iframe dev for now. Appreciate the help on this one.

  9. #9
    Sencha - Community Support Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,962
    Vote Rating
    10
    hendricd will become famous soon enough hendricd will become famous soon enough

      0  

    Default


    @olin --

    I would think you should not use an Ext.Scroller over the iframe:

    Code:
    defaults: {
          scroll: 'vertical',
    },
    items:[
      {
    	title: 'The Latest',
    	html: '<iframe src =\"http://www.kanuhawaii.org/mobileapi/feed/\" width=\"100%\" height=\"100%\"></iframe>',
    	id: 'feedTab',
    	iconCls: 'team',
            scroll : false,
    	cls: 'settings'
    // listeners: {added: getFeed}
    },
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  10. #10
    Ext User
    Join Date
    Aug 2010
    Posts
    29
    Vote Rating
    0
    olin is on a distinguished road

      0  

    Default


    Thanks Doug. Even with the scroll: false code whenever you use an iframe the entire page moves up and down with a swipe...not a very good interface for a user so am just staying away from using iframes all together.

Similar Threads

  1. converting sencha touch app to ipad app
    By fgeorge in forum Sencha Touch 1.x: Discussion
    Replies: 4
    Last Post: 4 Oct 2011, 1:09 PM
  2. Sencha Touch on iPhone v1 / iPod touch v1 ?
    By palnap in forum Sencha Touch 1.x: Discussion
    Replies: 4
    Last Post: 28 Oct 2010, 5:30 PM
  3. Compare Development IPad native(objectif-c) and Sencha Touch
    By Dragnic in forum Sencha Touch 1.x: Discussion
    Replies: 2
    Last Post: 16 Aug 2010, 12:41 AM
  4. URGENT telco request: Ext JS on iPad, Android, Tablet PCs
    By TheBerliner in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 1 Jun 2010, 9:15 AM

Thread Participants: 9