1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    17
    Vote Rating
    1
    Sn4k3 is on a distinguished road

      0  

    Default Unanswered: Capture scroll event of a div

    Unanswered: Capture scroll event of a div


    Hey,

    For a project we are working on, we need to display content of external HTML pages. To do so, I make use of an iframe. It shows the content correctly and I found a way to make it scrollable but when you test it on a iPad, only half of the iframe's content is loaded. So if you scroll down, you only see a white page.

    How can I capture the scroll event of a div ?

    PHP Code:
    Ext.define('VEP.view.EnrichmentView', {
        
    extend'Ext.Panel',
        
    xtype'enrichmentview',
        
        
    config: {
            
    cls'EnrichmentView',
            
    layout'vbox',
            
    urlnull,
            
    items: [
                {
                    
    xtype'panel',
                    
    cls'testScrolling',
                    
    height'100em',
                    
    scrollable: {
                        
    directionLocktrue,
                        
    slotSnapSize: {
                            
    x100,
                            
    y100
                        
    }
                    },
                    
    items: [
                        {
                            
    xtype'label',
                            
    styleHtmlContenttrue,
                            
    cls'loadingLabel',      
                            
    html'<div style="width:1200px;height:3000px;position:fixed;top:0;left:0;background-color:Transparent;float:left;z-index:99;"></div><iframe onLoad="function() {parent.document.getElementById(\'contentFrame\').height = document[\'body\'].offsetHeight;}" id="contentFrame" style="scrolling:none;border:none;position:fixed;top:0;left:0;float:left;z-index:1;" width="1200px" height="3000px" src="http://nl.wikipedia.org/wiki/De_Da_Vinci_Code_(boek)" sandbox="allow-same-origin allow-forms allow-scripts"></iframe>'
                            
    //html: '<div style="width:1200px;height:3000px;position:fixed;top:0;left:0;background-color:Transparent;float:left;z-index:99;"></div><object style="height: 3000px; width: 1000px" type="text/html" data="http://nl.wikipedia.org/wiki/De_Da_Vinci_Code_(boek)">'
                        
    }
                    ],
                    
                    
    initialize: function (vieweOpts) {
                            
                    }
                }
            ]
        }
    }); 
    I need to capture the scroll event of the div I have put in the html tag of the inner panel. Any help would be very welcome and higly appriciated !

  2. #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


    You really need to listen for the scroll events on the panel as that's what is scrolling. To do that:

    Code:
    panel.getScrollable().getScroller().on('scroll', function() {...});
    getScroller returns the Ext.scroller.Scroller instance where you have scrollstart, scroll and scrollend events.
    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.

  3. #3
    Sencha User
    Join Date
    Dec 2007
    Posts
    3
    Vote Rating
    0
    martyphee is on a distinguished road

      0  

    Default


    Any luck on this. I'm having the same issue with the scrolling not working.

Thread Participants: 2

Tags for this Thread