1. #1
    Sencha User
    Join Date
    Jan 2012
    Location
    Shanghai, China
    Posts
    21
    Answers
    1
    Vote Rating
    1
    tianhao is on a distinguished road

      0  

    Default Unanswered: focus and scroll to a certain record in a grid

    Unanswered: focus and scroll to a certain record in a grid


    hi all,i have the following code to focus and scroll to a certain record in a grid:
    Code:
    Ext.onReady(function(){
        var mainPanel = Ext.create('Ext.grid.Panel', {......});
    });
    mainPanel.render(document.body);
    var rowindex = 66;
    mainPanel.getSelectionModel().select(rowindex);
    mainPanel.getView().focusRow(rowindex);
    this can focus the record in the grid but cannot scroll to the record.but if i create a button with the last three line code,it works when i click the button.
    Code:
    Ext.onReady(function(){
        var mainPanel = Ext.create('Ext.grid.Panel', {......
              buttons: [{text: 'FocusScroll',
                              handler: function() {
    var rowindex = 66;
    mainPanel.getSelectionModel().select(rowindex);
    mainPanel.getView().focusRow(rowindex);
                              }
              }]
        });
    });
    mainPanel.render(document.body);
    how can i focus and scroll after the grid render without the button?
    thank you very much.

  2. #2
    Sencha User
    Join Date
    Jan 2012
    Location
    Shanghai, China
    Posts
    21
    Answers
    1
    Vote Rating
    1
    tianhao is on a distinguished road

      0  

    Default


    this can solve my problem:
    Code:
    Ext.onReady(function(){
         var mainPanel = Ext.create('Ext.grid.Panel', {......});
    }); 
    mainPanel.render(document.body); 
    setTimeout(function(){
        var rowindex = 66;
         mainPanel.getSelectionModel().select(rowindex);
        mainPanel.getView().focusRow(rowindex);
        }, 500
    );

  3. #3
    Sencha User
    Join Date
    Nov 2011
    Location
    Delhi
    Posts
    22
    Answers
    2
    Vote Rating
    0
    ashu2289 is on a distinguished road

      0  

    Default


    @tianhao: Delay definitely solves the problem, but this is something you cant rely on. I am also facing similar issue. Did you get any event which ensures that now you can perform scrolling or focus on a row.

  4. #4
    Sencha User
    Join Date
    Jan 2012
    Location
    Shanghai, China
    Posts
    21
    Answers
    1
    Vote Rating
    1
    tianhao is on a distinguished road

      0  

    Default


    yes, delay solves the problem.
    but i have no idea except this one.
    i also have not catched any event about scrolling.
    still waiting for the best solution.

  5. #5
    Sencha User
    Join Date
    Nov 2011
    Location
    Delhi
    Posts
    22
    Answers
    2
    Vote Rating
    0
    ashu2289 is on a distinguished road

      0  

    Default


    In my case, this solves the problem. I have used the afterrender event of the scrollbar. Below are the grid listeners:

    Code:
    afterrender: function(grid){                	   
                    	   var view = grid.getView();
                    	   if(view && recordId){
                    		   view.on('refresh', function(grid){
                    			   var rowIndex = grid.getStore().indexOfId(recordId);
                    			   if(rowIndex!=-1){
                    				  grid.getSelectionModel().select(rowIndex);
                    				    view.focusRow(recordId);
                          			}
                    		}, this);
                    	   }
                    	},
                    	scrollershow: function(scroller, orientation, opts){
                    		 scroller.on('afterrender', function(){
                    		 		var grid = Ext.getCmp('resultGrid');
                    		 		var view = grid.getView();
                          	   		if(view && recordId){
                          	   			var rowIndex = grid.getStore().indexOfId(recordId);
                          	   			if(rowIndex!=-1){
                          	   				view.focusRow(view.getRecord(view.getNode(rowIndex))); 
                          	   			}
                          	   		}
                    		 	}, this);
                    	 },

  6. #6
    Ext Premium Member yyogev's Avatar
    Join Date
    Jun 2009
    Location
    Shoham, Israel
    Posts
    196
    Answers
    5
    Vote Rating
    6
    yyogev is on a distinguished road

      0  

    Default Even after grid is rendered, later gets scrolled back to the top

    Even after grid is rendered, later gets scrolled back to the top


    I found that even after waiting for the grid to be rendered, focusRow() would show the record, and then later a page redraw occured due to more items (e.g. other grids) that were added beside this grid caused this grid to scroll back to the top.

    I have solved it in a crude way by keeping count of how many grids and panels that need to be rendered I have in my page, and each would decrease the counter in afterrender so when all was really ready I would issue the focusRow() call.
    Yaron Yogev

    IT Software Developer

  7. #7
    Sencha User
    Join Date
    Jan 2012
    Location
    Shanghai, China
    Posts
    21
    Answers
    1
    Vote Rating
    1
    tianhao is on a distinguished road

      0  

    Default


    thanks to ashu2289, i will try the code in my page.
    also thanks to yyogev for your remind. delay focus did it because i loaded data to the grid with ajax.

Thread Participants: 2

Tags for this Thread