1. #1
    Sencha User
    Join Date
    May 2013
    Posts
    10
    Vote Rating
    0
    venkatraman is on a distinguished road

      0  

    Default Answered: Scroll down to load content in panel

    Answered: Scroll down to load content in panel


    Hi everyone,

    I created one panel to load content through server side. using one button to load next few content. but i want to load automatically when i do scroll down. please give me some idea to do this.

    Thanks in advance
    venkat

  2. Code:
    el.on('scroll', function(e, t){
    
        var factor = 100;
        if (t.scrollHeight - t.scrollTop < factor) {
            Ext.Ajax.request({
                url: 'foo',
                success: function(response){
                    el.dom.innerHTML = el.dom.innerHTML + response.responseText;
                }
            });
        }
    
    });

  3. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,167
    Vote Rating
    674
    Answers
    474
    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


    Listen to the scroll event on the element. If the scrollTop is within (x) of the scrollHeight, trigger if your load and then append the content.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  4. #3
    Sencha User
    Join Date
    May 2013
    Posts
    10
    Vote Rating
    0
    venkatraman is on a distinguished road

      0  

    Default


    thanks for replying my post evant.

    can you please suggest me any sample code here. i'm new to extjs

  5. #4
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,167
    Vote Rating
    674
    Answers
    474
    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


    Code:
    el.on('scroll', function(e, t){
    
        var factor = 100;
        if (t.scrollHeight - t.scrollTop < factor) {
            Ext.Ajax.request({
                url: 'foo',
                success: function(response){
                    el.dom.innerHTML = el.dom.innerHTML + response.responseText;
                }
            });
        }
    
    });
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  6. #5
    Sencha User
    Join Date
    May 2013
    Posts
    10
    Vote Rating
    0
    venkatraman is on a distinguished road

      0  

    Default


    It works fine evant. but the problem is whenever i scroll that event will occur but i want to occur only when i reach the bottom of the page.please give me some suggestion

    thanks
    venkat

  7. #6
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,167
    Vote Rating
    674
    Answers
    474
    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


    That's why the scrollHeight/scrollTop check is there, whenever you get within <x> pixels of the bottom, it will trigger.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  8. #7
    Sencha User
    Join Date
    May 2013
    Posts
    10
    Vote Rating
    0
    venkatraman is on a distinguished road

      0  

    Default


    ya i got that evant. but if i'm using different machine the scrollTop value is different so i want to check condition in some other way. Is it possible to achieve any way.

    thanks
    venkat

  9. #8
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,167
    Vote Rating
    674
    Answers
    474
    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

      1  

    Default


    What do you mean check it in another way? The only thing that changes is the scrollTop on the element.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  10. #9
    Sencha User
    Join Date
    May 2013
    Posts
    10
    Vote Rating
    0
    venkatraman is on a distinguished road

      0  

    Default


    thanks for replying my all post and giving me suggestions evant. Finally i done that using clientHeight to check the right condition. It works correct in all kind of monitors.

    thanks again
    venkat

  11. #10
    Sencha User
    Join Date
    May 2013
    Posts
    10
    Vote Rating
    0
    venkatraman is on a distinguished road

      0  

    Default


    I have one doubt evant. I am having fileupload tag in my form. If i upload some file in that tag i'm getting image preview in client side but i want one additional feature to check the image dimension while i'm uploading any image. Is it possible to achieve in client side vailidation

    Thanks in advance
    Venkat

Thread Participants: 1

Tags for this Thread