1. #1
    Rasmus
    Guest

    Default Scrolling the grid to the bottom

    Scrolling the grid to the bottom


    I am adding a row and am trying to figure out how to scroll it to the bottom after the addRow. I thought something like this would work:

    Grid.grid.getDataModel().addRow(resp['row']);
    Grid.grid.getSelectionModel().focusRow(Grid.grid.getDataModel().getRowCount());

    What am I missing? I guess focusRow() doesn't do what the name implies?

  2. #2
    Rasmus
    Guest

    Default


    Ah, helps if I read the code GridView code correctly. focusRow takes the actual element, so this works:
    Grid.grid.getSelectionModel().focusRow(Grid.grid.getSelectionModel().getRow(Grid.grid.getDataModel().getRowCount()-1));

  3. #3
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    17
    jack.slocum will become famous soon enough jack.slocum will become famous soon enough

      0  

    Default


    Is this a normal grid or an editable grid? The EditorGrid overrides the SelectionModel from focusing rows to make sure the Editors get the focus. If your are not using EditorGrid, and you are using firefox, sometimes you have to set a timeout to let FireFox catch up in order to focus. Focusing in general can be flaky in FF. In the latest development version I have added a method to the main grid object that tries to scroll the row into view without focusing it:
    grid.scrollTo(row);

    The row argument can either be a row HTMLElement or the rowIndex. This method tries to scroll the grid without stealing focus. If you don't mind stealing focus, the preferred way to focus a row is: grid.view.focusRow(row); or if you have the latest version, grid.getView().focusRow(row). The method in the SelectionModel is just calling this method anyway, so you save a function call by calling it directly.

    With the latest development version, you can change this code too:

    Grid.grid.getDataModel().addRow(resp['row']);
    Grid.grid.getSelectionModel().focusRow(Grid.grid.getDataModel().getRowCount());

    to

    var index = Grid.grid.getDataModel().addRow(resp['row']);
    Grid.grid.scrollTo(index);
    or
    Grid.grid.getView().focusRow(index);

  4. #4
    Ext User
    Join Date
    Mar 2007
    Posts
    36
    Vote Rating
    0
    kovtik is on a distinguished road

      0  

    Default


    With the latest development version, you can change this code too:

    Grid.grid.getDataModel().addRow(resp['row']);
    Grid.grid.getSelectionModel().focusRow(Grid.grid.getDataModel().getRowCount());

    to

    var index = Grid.grid.getDataModel().addRow(resp['row']);
    Grid.grid.scrollTo(index);
    or
    Grid.grid.getView().focusRow(index);
    Look at my page:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title>Untitled Page</title>
        <link rel="stylesheet" type="text/css" href="css/grid.css" />
        <script type="text/javascript" src="js/yui/yahoo.js"></script>
        <script type="text/javascript" src="js/yui/event.js"></script>
        <script type="text/javascript" src="js/yui/dom.js"></script>
        <script type="text/javascript" src="js/yui/dragdrop.js"></script>
        <script type="text/javascript" src="js/yui/connection.js"></script>
        
        <script type="text/javascript" src="js/yui-ext/yui-ext.js"></script>
    </head>
    <body>
        <div id="grid" style="width:250px;height:150px;overflow:hidden;position:relative;"></div>
        <input id="Button1" type="button" onclick="Test.scroll();" value="button" />
        <script type="text/javascript">
    		var Test = {
                    init : function(){
                        var dataSchema = {tagName: 'child', fields: ['name']};
                        var dataModel = new YAHOO.ext.grid.XMLDataModel(dataSchema);
                        
                        var columns = [ {header: "Name", width: 200, sortType: YAHOO.ext.grid.DefaultColumnModel.sortTypes.asUCString} ];
                        var columnModel = new YAHOO.ext.grid.DefaultColumnModel(columns);
                        columnModel.defaultSortable = true;
                        
                        dataModel.setDefaultSort(columnModel, 0, "ASC");
                        
                        this.grid = new YAHOO.ext.grid.Grid('grid', dataModel, columnModel);
                        this.grid.render();
                        dataModel.load('xml/getDirectoryPlayList.xml');//loading 20 records
                    },
                    
                    scroll : function(){
                        var index = 18;
                        this.grid.scrollTo(index);//doesn't work
                        //this.grid.getView().focusRow(index); //works
                        //this.grid.getSelectionModel().focusRow(index); //works
    
                    }
                };
                
            YAHOO.util.Event.on(window, 'load', Test.init, Test, true);
        </script>
    </body>
    </html>
    Could you explain me this:
    Code:
    this.grid.scrollTo(index);//doesn't work
    this.grid.getView().focusRow(index); //works
    this.grid.getSelectionModel().focusRow(index); //works

  5. #5
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    17
    jack.slocum will become famous soon enough jack.slocum will become famous soon enough

      0  

    Default


    Ok I took a look at this and did some extensive testing. I ending up redoing the method in charge of scrolling to the row. The new version will be in the release but in the meantime, you can use this patch:

    Code:
    YAHOO.ext.grid.GridView.prototype._ensureVisible = function(row){
            if(typeof row == 'number'){
                row = this.getBodyTable().childNodes[row];
            }
            if(!row) return;
        	var left = this.wrap.scrollLeft;
        	var rowTop = parseInt(row.offsetTop, 10); // parseInt for safari bug
            var rowBottom = rowTop + row.offsetHeight;
            var clientTop = parseInt(this.wrap.scrollTop, 10); // parseInt for safari bug
            var clientBottom = clientTop + this.wrap.clientHeight;
            if(rowTop < clientTop){
            	this.wrap.scrollTop = rowTop;
            }else if(rowBottom > clientBottom){
                this.wrap.scrollTop = rowBottom-this.wrap.clientHeight;
            }
            this.wrap.scrollLeft = left;
            this.handleScroll();
        };
    Let me know if that fixes it for you. This new version also scrolls up, which the old version didn't do. It also aligns the bottom of the row to the bottom of the view instead of scrolling the row to the top of the grid.

  6. #6
    Ext User
    Join Date
    Mar 2007
    Posts
    36
    Vote Rating
    0
    kovtik is on a distinguished road

      0  

    Default


    ...Let me know if that fixes it for you. This new version also scrolls up, which the old version didn't do. It also aligns the bottom of the row to the bottom of the view instead of scrolling the row to the top of the grid.
    Yes, that fixed it for me with several issues:
    1) record to scroll is always positioned at the second row from the bottom of the view during scrolling down;
    2) record to scroll is not shown during scrolling up (it is positioned before the first row of the view).
    Can the record to scroll be positioned at the top of the view if it is possible?

  7. #7
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    17
    jack.slocum will become famous soon enough jack.slocum will become famous soon enough

      0  

    Default


    I should be - unless you are using an older version with the scrollbar overlap?

  8. #8
    Ext User
    Join Date
    Mar 2007
    Posts
    36
    Vote Rating
    0
    kovtik is on a distinguished road

      0  

    Default


    I should be - unless you are using an older version with the scrollbar overlap?
    I afraid that I don't understand your question. I didn't changed scrollbarMode property of the GridView object, so by default it was set to YAHOO.ext.grid.GridView.SCROLLBARS_UNDER.

    YAHOO.ext.grid.Grid.scrollTo function in 0.32.3.1 release works fine, I simply want that the record to scroll be positioned always at the top of the view not depending on the scrolling direction (now if the grid is scrolling down the record to scroll is postitioned at the bottom of the view; if the grid is scrolling up the record to scroll is positioned at the top of the view).

  9. #9
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    17
    jack.slocum will become famous soon enough jack.slocum will become famous soon enough

      0  

    Default


    I see. You could add something like this to grid:

    Code:
    YAHOO.ext.grid.Grid.prototype.scrollRowToTop = function(row){
            if(typeof row == 'number'){
                row = this.getRow(row);
            }
            if(!row) return;
        	this.view.wrap.scrollTop = row.offsetTop;
        }

Similar Threads

  1. Scrolling (rather than paging) grid
    By elygre in forum Ext 1.x: User Extensions and Plugins
    Replies: 76
    Last Post: 25 Mar 2008, 7:04 AM
  2. Grid/GridPanel: scrolling
    By jbraband in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 2 Mar 2007, 12:39 AM
  3. Grid Scrolling
    By Belgabor in forum Ext 1.x: Help & Discussion
    Replies: 0
    Last Post: 19 Feb 2007, 11:03 AM
  4. Tabs at the bottom? (without a layout manager)
    By alanwilliamson in forum Ext 1.x: Help & Discussion
    Replies: 7
    Last Post: 7 Dec 2006, 8:12 AM
  5. Bottom panel has no scrollbar
    By bpawlak in forum Ext 1.x: Bugs
    Replies: 2
    Last Post: 20 Oct 2006, 7:58 AM

Thread Participants: 2