Results 1 to 4 of 4

Thread: Adding columns dynamically-by scrolling from Left to right

  1. #1
    Sencha User
    Join Date
    Feb 2017
    Posts
    5

    Default Adding columns dynamically-by scrolling from Left to right

    Hi Team,
    I am new to Extjs.I am just exploring the framework.I am trying to add a columns dynamically from an API to a grid.
    Whenever a user scrolls to the end i have to add columns dynamically.

    For that i have used the below code.It listens to scroll events both horizontal as well as vertical.I need to listen only horizontal scroll that too when the scroll bar reaches the end of the grid.Is there any way we can listen to only horizantal scroll alone.

    grid.getView().getEl().on('scroll', function(element, dom,event) {
    // console.log('scolling event captured successfully')
    console.log('scolling event element successfully',element)
    console.log('scolling event dom successfully',dom)
    console.log('scolling event event successfully',event)


    } )

  2. #2
    Sencha User
    Join Date
    Sep 2014
    Location
    Central Europe
    Posts
    795
    Answers
    103

    Default

    Hi

    Hm I would probably go this way:

    The grid have have component Ext.scroll.Scroller this component has event scroll

    http://docs.sencha.com/extjs/6.2.0/c...l#event-scroll

    And this event have both parameters x, y. You can use getSize to get the size of the scrollbar. So with this information you might be able to determine if you are at the end and you want to create column.

    I created quick fiddle for you https://fiddle.sencha.com/#view/editor&fiddle/1ru5

    Code:
        scrollable: {
            listeners: {
                scroll: function(me, x, y, eOpts) {
                    var scSize = Ext.first("#mySpecialGrid").getScrollable().getSize();                console.log(scSize);
                    console.log(x, y);
                    // acess the grid from here
                    // based on conditions create new column
                }
            }
        },
    Basically you want to create "excel" infinite grid. I would bet that someone already tried that, so I would also try to google for the solution.

    Regards
    Petr

  3. #3
    Sencha User
    Join Date
    Feb 2017
    Posts
    5

    Default is your code compatible with 4.2.0?

    I am using 4.2.0.It's not working in my environment.Am i missing something?

    Quote Originally Posted by petr.vecera View Post
    Hi

    Hm I would probably go this way:

    The grid have have component Ext.scroll.Scroller this component has event scroll

    http://docs.sencha.com/extjs/6.2.0/c...l#event-scroll

    And this event have both parameters x, y. You can use getSize to get the size of the scrollbar. So with this information you might be able to determine if you are at the end and you want to create column.

    I created quick fiddle for you https://fiddle.sencha.com/#view/editor&fiddle/1ru5

    Code:
        scrollable: {
            listeners: {
                scroll: function(me, x, y, eOpts) {
                    var scSize = Ext.first("#mySpecialGrid").getScrollable().getSize();                console.log(scSize);
                    console.log(x, y);
                    // acess the grid from here
                    // based on conditions create new column
                }
            }
        },
    Basically you want to create "excel" infinite grid. I would bet that someone already tried that, so I would also try to google for the solution.

    Regards
    Petr

  4. #4
    Sencha User
    Join Date
    Feb 2017
    Posts
    5

    Default is your code compatible with 4.2.0?

    I am using 4.2.0.It's not working in my environment.Am i missing something?

    Quote Originally Posted by petr.vecera View Post
    Hi

    Hm I would probably go this way:

    The grid have have component Ext.scroll.Scroller this component has event scroll

    http://docs.sencha.com/extjs/6.2.0/c...l#event-scroll

    And this event have both parameters x, y. You can use getSize to get the size of the scrollbar. So with this information you might be able to determine if you are at the end and you want to create column.

    I created quick fiddle for you https://fiddle.sencha.com/#view/editor&fiddle/1ru5

    Code:
        scrollable: {
            listeners: {
                scroll: function(me, x, y, eOpts) {
                    var scSize = Ext.first("#mySpecialGrid").getScrollable().getSize();                console.log(scSize);
                    console.log(x, y);
                    // acess the grid from here
                    // based on conditions create new column
                }
            }
        },
    Basically you want to create "excel" infinite grid. I would bet that someone already tried that, so I would also try to google for the solution.

    Regards
    Petr

  5. #5
    Sencha User
    Join Date
    Feb 2017
    Posts
    5

    Default Does your code work on 4.2.0?

    I have attached my source code here.Its not working for me.Its not triggering the scrollable block.I am not sure what i missed.Thank you so much for your help.
    Attached Files Attached Files

  6. #6
    Sencha User
    Join Date
    Sep 2014
    Location
    Central Europe
    Posts
    795
    Answers
    103

    Default

    I see. Well in Ext 4 there is no scroller component so the code will not work http://docs.sencha.com/extjs/4.2.3/#...Ext.grid.Panel
    I am sorry but I don't have any solution for you in Ext 4 from top of my head. Maybe someone will help you with this.

Similar Threads

  1. Dynamically adding / resizing columns and portlets
    By Piruthu in forum Ext 3.x: Help & Discussion
    Replies: 7
    Last Post: 6 Jan 2011, 12:17 AM
  2. dynamically adding columns to a grid panel...
    By chrizmaster in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 18 Aug 2009, 9:52 PM
  3. Adding a yahoo map to dual left and right columns
    By tranzparency in forum Ext 1.x: Bugs
    Replies: 1
    Last Post: 29 Oct 2006, 7:49 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
  •