Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: Scrolling togrid row (bug?)

  1. #1
    Sencha User
    Join Date
    Jul 2014
    Posts
    28
    Answers
    1

    Default Answered: Scrolling togrid row (bug?)

    Hello,
    I'm working on a grid where you add and remove users, as well as edit them. (rowEditing)
    Now, When I add a user, it auto-edited the first row, instead of that of the new User. I got around this by changing the parameters in the handler for the event. Now it auto-highlights the last row in edit mode, good.

    Problem is, with a grid that has many rows and a scroll bar, the newest row might be highlighted, but the scroll bar does not scroll to the bottom automatically for you to see it.

    This is my function for the scrolling, first one works:
    Code:
                        handler: function() {
    var view = grid.getView();
                  Ext.get(view.getRow(22)).scrollIntoView(view.getEl(), null, true);
                            //figure out why number is returning 'null' if it's referenced with a variable.
                       
                            rowEditing.cancelEdit();
    
                            var r = Ext.create('User', {
                                email: null,                            
                                name: null,
                                active: false
                            });
                            userStore.insert(0, r);
                            rowEditing.startEdit(r,0);
                            
                        }
    Second one doesn't:

    Code:
                        handler: function() {
    var view = grid.getView();
    lengthOfStore = store.length - 2;
                  Ext.get(view.getRow(lengthOfStore)).scrollIntoView(view.getEl(), null, true);
                            //figure out why number is returning 'null' if it's referenced with a variable.
                       
                            rowEditing.cancelEdit();
    
                            var r = Ext.create('User', {
                                email: null,                            
                                name: null,
                                active: false
                            });
                            userStore.insert(0, r);
                            rowEditing.startEdit(r,0);
                            
                        }

    Now, since I do not know the exact number, and depending on the length of the store, and it would change whenever a user is made, I need a variable that contains the length of the store. As one can see here, this doesn't work, and the only way it does seem to work is if a number is actually hard-coded into there.

    Is this a bug? Is there a way to get around this?
    Thanks

  2. Quote Originally Posted by Ryuslayer View Post
    I took your suggestion, and tried inputting a huge number manually, but it returned null as well.
    That isn't what I was suggesting.

    You're currently trying to scroll to a particular row. I was suggesting just scrolling down by a huge number of pixels instead. See the docs for the available scroll methods.

    If you want to understand why -5 works and other values don't you'll have to take a look at the DOM and figure out what the difference is between the rows that work and those that don't.

  3. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,791
    Answers
    585

    Default

    Stores don't have a length property, they have a getCount method.

    If that isn't the problem then you should put together a Fiddle.

  4. #3
    Sencha User
    Join Date
    Jul 2014
    Posts
    28
    Answers
    1

    Default

    Quote Originally Posted by skirtle View Post
    Stores don't have a length property, they have a getCount method.

    If that isn't the problem then you should put together a Fiddle.
    The code is kind of long, but this particular store's data is an array of objects. Using a length method outputs a number when I make a console.log().

    However, I tried using, "grid.store.getCount()", so:

    Code:
                        handler: function() {
    var view = grid.getView();
    lengthOfStore = grid.store.getCount();
                  Ext.get(view.getRow(lengthOfStore)).scrollIntoView(view.getEl(), null, true);
                            //figure out why number is returning 'null' if it's referenced with a variable.
                       
                            rowEditing.cancelEdit();
    
    
                            var r = Ext.create('User', {
                                name: null,
                                email: null,
                                active: false
                            });
                            userStore.insert(0, r);
                            rowEditing.startEdit(r,0);
                            
                        }
    Does the same thing.
    Alternatively, if I put it in the parameter,
    Code:
                        handler: function() {
    var view = grid.getView();
                  Ext.get(view.getRow(grid.store.getCount())).scrollIntoView(view.getEl(), null, true);
                            //figure out why number is returning 'null' if it's referenced with a variable.
                       
                            rowEditing.cancelEdit();
    
    
                            var r = Ext.create('User', {
                                name: null,
                                email: null,
                                active: false
                            });
                            userStore.insert(0, r);
                            rowEditing.startEdit(r,0);
                            
                        }
    Doesn't do much, either. It seems to not want to accept a variable that represents a number, it seems to only accept direct numbers...

  5. #4
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,791
    Answers
    585

    Default

    It doesn't really matter what data was originally used to populate the store. By the time you start manipulating it you need to go through the store and forget the array.

    It can't tell the difference between a hard-coded number and one stored in a variable. Once it's passed to the function it's just a number. If you get different behaviour you must be passing a different number.

    Log out the number and confirm it is the same number. I suspect you need to subtract 1.

  6. #5
    Sencha User
    Join Date
    Jul 2014
    Posts
    28
    Answers
    1

    Default

    Code:
    {
                        text: 'Add User',
                        //iconCls: src('/images/buttons/addIcon.png'),
                        handler: function() {
    var view = grid.getView();
    
    
     lengthOfStore = grid.store.getCount() -1;
     console.log(lengthOfStore);
    //console logs 47 
                  Ext.get(view.getRow(lengthOfStore)).scrollIntoView(view.getEl(), null, true);
                            //figure out why number is returning 'null' if it's referenced with a variable.
                       
                            rowEditing.cancelEdit();
    
    
                            var r = Ext.create('User', {
                                name: null,
                                email: null,
                                active: false
                            });
                            userStore.insert(0, r);
                            rowEditing.startEdit(r,0);
                            
                        }
                    }
    Hey, did just that. It logs out the numbers beautifully. I have Firebug open in Firefox, but on the ScrollIntoView line, Firebug throws:


    TypeError: Ext.get(...) is null

    Ext.get(view.getRow(lengthOfStore)).scrollIntoView(view.getEl(), null, true);

  7. #6
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,791
    Answers
    585

    Default

    Much more logging required...

    Code:
    console.log(lengthOfStore);
    console.log(view.getRow(lengthOfStore));
    console.log(Ext.get(view.getRow(lengthOfStore)));
    My guess is getRow isn't returning anything. Perhaps the last row isn't rendered yet? Are you using buffered rendering, perhaps?

  8. #7
    Sencha User
    Join Date
    Jul 2014
    Posts
    28
    Answers
    1

    Default

    Quote Originally Posted by skirtle View Post
    Much more logging required...

    Code:
    console.log(lengthOfStore);
    console.log(view.getRow(lengthOfStore));
    console.log(Ext.get(view.getRow(lengthOfStore)));
    My guess is getRow isn't returning anything. Perhaps the last row isn't rendered yet? Are you using buffered rendering, perhaps?


    Code:
    console.log(lengthOfStore); //logs 47
    console.log(view.getRow(lengthOfStore));//logs null
    console.log(Ext.get(view.getRow(lengthOfStore)));//logs null
    at the end of those three logs, it types the error of the previously mentioned reply: "



    TypeError: Ext.get(...) is null

    Ext.get(view.getRow(lengthOfStore)).scrollIntoView(view.getEl(), null, true);


    "
    alternatively, Chrome's console logs:

    Code:
    console.log(lengthOfStore); //logs 47
    console.log(view.getRow(lengthOfStore));//logs null
    console.log(Ext.get(view.getRow(lengthOfStore)));//logs null
    and logs a similar report of the error, along with a whole bunch of debug info one can open:
    • Uncaught TypeError: Cannot read property 'scrollIntoView' of null user.js:124
      • grid.Ext.create.tbar.handler
      • Ext.apply.callback Util.js:98
      • Ext.define.fireHandle Button.js?_dc=1407874993906:1408
      • Ext.define.onClick Button.js?_dc=1407874993906:1394
      • Ext.define.doFire Controller.js?_dc=1407874993563:244
      • Ext.define.fire Controller.js?_dc=1407874993563:122
      • Ext.define.doDispatchEvent Dispatcher.js?_dc=1407874993563:482
      • Ext.define.dispatch Publisher.js?_dc=1407874994218:65
      • Ext.Base.Base.addMembers.callParent Base.js:1253
      • Ext.define.dispatch Dom.js?_dc=1407874994218:449
      • Ext.define.doPublish Dom.js?_dc=1407874994218:538
      • Ext.define.publish Dom.js?_dc=1407874994218:487
      • Ext.define.onDelegatedEventDom.js?_dc=1407874994218:620
      • (anonymous function)
    If that info helps.

    How do I know whether I'm using 'buffered rendering'?

  9. #8
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,791
    Answers
    585

    Default

    The error message is pretty clear. You're trying to invoke a method on null. That should come as no surprise when the logging clearly shows the values are null.

    So dig in. Figure out why getRow is null. Try calling getRow for other indexes to see where the cut off point is.

    I sense you don't understand what this code is trying to do. Have you copied and pasted it from somewhere without taking the time to study what it does?

    It's trying to grab the HTML element for that row. For some reason that isn't coming back. You need to figure out why. Does the element exist?

    If all you want to do is scroll the scrollbar to the end then all this code for finding an element to scroll into view is a bit unnecessary. Just scroll down by a really big number.

  10. #9
    Sencha User
    Join Date
    Jul 2014
    Posts
    28
    Answers
    1

    Default

    Hi, indeed I was trying to find a solution to scroll all the way to the bottom of the grid. It is only important to me whether that new line can be seen. So that it doesn't just add an empty field at the bottom while the user is stuck looking at the top.

    I took your suggestion, and tried inputting a huge number manually, but it returned null as well. Then I tried increasing the increments of the number subtracted from lengthOfStore. Originally we set it to "-1". Which returned null:

    Code:
    var lengthOfStore = grid.store.getCount() -1;
                  Ext.get(view.getRow(lengthOfStore)).scrollIntoView(view.getEl(), null, true);
                            //figure out why number is returning 'null'
    I increased the increments, "-1"," -2","-3", "-4". These all returned null, however, "-5" worked.

    Code:
     var lengthOfStore = grid.store.getCount() -5;
                  Ext.get(view.getRow(lengthOfStore)).scrollIntoView(view.getEl(), null, true);
                            //-5 didn't return null, everything less did.
    Unfortunately, with "-5" the new row is still cut off and can't be seen by the user unless he scrolls down manually.

  11. #10
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,791
    Answers
    585

    Default

    Quote Originally Posted by Ryuslayer View Post
    I took your suggestion, and tried inputting a huge number manually, but it returned null as well.
    That isn't what I was suggesting.

    You're currently trying to scroll to a particular row. I was suggesting just scrolling down by a huge number of pixels instead. See the docs for the available scroll methods.

    If you want to understand why -5 works and other values don't you'll have to take a look at the DOM and figure out what the difference is between the rows that work and those that don't.

Page 1 of 2 12 LastLast

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
  •