PDA

View Full Version : [SOLVED] Array grid example from docs, scrolling to last row of grid not working!



violinista
28 May 2007, 4:53 AM
Hello all,

I have a need for making grid scrolling to bottom, after loading it. As usual, i try it first on provided examples (which are great ones, BTW), and was surprised with some (for me) strange issue. I edited the simplest, array.js:



.
.
.
grid.render();

grid.getSelectionModel().selectLastRow(); //works as in docs, but not as intended- only selects last row
grid.getView().focusRow(15); //doesnt work, throws an error.
grid.scrollTo(15); //doesnt work, throws an error


I have tried both 1.0.0 and 1.0.1 versions of ExtJs and it was always the case. Where am I doing wrong? I was searching all morning through examples, docs and forum, and found these focusRow(), selectLastRow(), and scrollTo() methods, but they does not work.

Thanks in advance!

Animal
28 May 2007, 6:29 AM
"throws an error" does not tell any potential helper anything.

Which bit of the documentation that you searched mentions a "scrollTo" method of the Grid?

This:

grid.getView().focusRow(n);


Does in fact work where "grid" references a valid Grid object. It will scroll it into view.

Then:

grid.getSelectionModel().selectRow(n);


will select that row.

You can test these without creating your own test page. Just set a breakpoint in the Array Grid example after the grid has been created, then switch to the console and type



window.grid = grid


This creates a global variable called "grid" which you can use later...

Then switch back to the debug tab, and click "continue". After the grid has been created, go to the console, and you can experiment with these calls using the global "grid" variable, and see that they work.

violinista
29 May 2007, 4:49 AM
In array example, which I am using, grid is defined in standard fashion:


var grid = new Ext.grid.Grid('grid-example', {
ds: ds,
cm: colModel,

});

After that, it is rendered:



grid.render();

Displayed correctly. When I try to do:


grid.getView().focusRow(15);

it throws an error: "_27.rows[_24] has no properties" in Ext-all.js.

Thanks!

Animal
29 May 2007, 4:53 AM
Don't forget it's asynchronous. There might not be a 15th row if you are running that code right after the render call.

This stuff works consistently, I don't understand what the problem is!

violinista
29 May 2007, 5:02 AM
That means I have to wait a bit before doing focusRow()?

Animal
29 May 2007, 5:07 AM
Well, the usual.... hook the Store's load event with a single:true handler.

violinista
29 May 2007, 5:46 AM
so, after grid.render() I typed:



grid.getDataSource().on("load", function() {
grid.getView().focusRow(5);
},
{
single:true
});



...and the 5th row is not focused. Is there some other way to scroll/focus the [5th |Nth | last] row of datagrid? Actually, I need to scroll to last row of the dataGrid after dataStore is loaded.

Thanks!

Animal
29 May 2007, 5:52 AM
After the grid render. Would the Store already be loaded then? Have you already called load()?

focusRow just scrolls it into view SelectionModel.selectRow() selects

You're using the on function wrong: http://extjs.com/deploy/ext/docs/output/Ext.util.Observable.html#addListener

violinista
29 May 2007, 6:06 AM
The complete code is:



var ds = new Ext.data.Store({ .... });
ds.load();

var grid = new Ext.grid.Grid( .... );

grid.render();

grid.getDataSource().on({"load": {
fn:function() {
grid.getView().focusRow(15);
},
options: {
single:true
}}});



...and 15th row is neither scrolledIntoView, nor FireBug throws error message-it seems syntax is OK, but no desired action at all.

Animal
29 May 2007, 6:08 AM
Well the grid is loaded, so it's not going to fier the load event again!

violinista
29 May 2007, 6:21 AM
OK, since I am totally messed up with this, I am giving up from focusRow() and going to old-school scrollIntoView() function (although I am trying to use all possible features of extJs, love it!), maybe will try a bit later with extJS focusRow().

thank you very much, it seems for me you are sitting on forum and waiting for dumb questions to answer! Great work for you,Animal and extJS team.

Animal
29 May 2007, 11:19 AM
focusRow is what you want.

Attach the load listener before you do the load, and it will work.

violinista
30 May 2007, 2:03 AM
Yes, yes and YES! Here is the solution:


Define datastore for grid
Define grid layout
render grid
Define header and footer for grid
Attach onLoad handler for data store, where you put code for focusRow
finally, load dataStore!


Note, that header and footer must be defined before focusRow(), as row will be hidden of form footer!! Amazing.

Complete solution, again:




var ds = new Ext.data.Store({ ... });
var grid = new Ext.grid.Grid('grid-example', { .... });
grid.render();

//define layout, toolbars, headers, footers, forms, etc...
//and, lastly:

grid.getDataSource().on({"load": {
fn:function() {
grid.getView().focusRow(grid.getDataSource().getTotalCount()-1);
grid.getSelectionModel().selectLastRow();
},
options: {
single:true
}
}});
ds.load();



Note this "sweet" line of code:


grid.getView().focusRow(grid.getDataSource().getTotalCount()-1);

...that tells to extJs: "please, focus the row in my grid with index based by totalCount of grid dataStore, less by 1". :D Great, I found it on another topic.




Thanks, Animal! You are the best supporter ever.

Regards,
Violinist

sathishs
15 Feb 2008, 2:10 AM
Hi,
I tried to select first row in a grid panel while loading datastore,but it shows the following err:

grid1.getDataSource has no properties

My code:
Ext.onReady(function() {
var store = new Ext.data.SimpleStore({
fields: [
{name: 'name'},
{name: 'id'},
{name: 'desc'},

]

});
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
{
id:'name',
header : "VLAN Name",
dataIndex: 'name',
width : 150,
},{
header : "VLAN Id",
width: 75,
dataIndex: 'id',
},{
header : "Description",
width: 75,
dataIndex: 'desc',


}

]);
grid1 = new Ext.grid.EditorGridPanel({
store: store,
cm: cm,
id : 'vlantable-display',
viewConfig: {
forceFit:true
},

renderTo: 'VLAN-Details',
width:1270,
height:800,
collapsible: true,
// style: 'padding:20px 0px 10px 200px',
title:'Details of VLAN',
autoScroll: true,
monitorResize: true,
frame:true,
});
grid1.getDataSource.on({"load": {
fn:function() {
grid1.getView().focusRow(grid1.getDataSource().getTotalCount()-1);
grid1.getSelectionModel().selectLastRow();
},
options: {
single:true
}
}});

store.loadData(myData);
});
wats the problem in my code???
Thanks,
sathishs

fay
15 Feb 2008, 2:25 AM
grid1.getDataSource is a method not a property so use


grid1.getDataSource().on(...

* It's not a good idea to post a new question in a topic that is already marked as [SOLVED].

* This is the 1.x forum, EditorGridPanel is 2.0 (http://extjs.com/forum/forumdisplay.php?f=9).

EDIT: Actually, it should be grid1.getStore().on(...

sathishs
15 Feb 2008, 8:46 PM
*sry for the mistake,

sathishs

rootnode_
10 Mar 2009, 1:08 AM
Took me a while to get to this but it was the step in the right direction for me.

Someone else might find this useful - here's what worked for me (I'm using 2.2) is


this.getView().on('refresh',
function(){
if(_row != null || _row == 0){
var gridObj = this;
gridObj.getView().focusRow(_row+6);
gridObj.getSelectionModel().selectRow(_row);
_row = null;
}
},
this);

Where this is in the context of the GridPanel or EditorGridPanel constructor as follows:


// EditorGridPanel
Ext.ux.umlungu.FullGridPanel = function(ttl) {
var new_conf = {};
//
new_conf.id = "gridPanel";
new_conf.hideCollapseTool = true;
new_conf.titleCollapse = true;
new_conf.title = ttl; //etc...
//... some custom stuff here - just distracts from the point
//call superclass constructor
Ext.ux.umlungu.FullGridPanel.superclass.constructor.call(this,new_conf);

this.getView().on('refresh',
function(){
if(_row != null || _row == 0){
var gridObj = this;
gridObj.getView().focusRow(_row+6);
gridObj.getSelectionModel().selectRow(_row);
_row = null;
}
},
this);
};
Ext.extend(Ext.ux.umlungu.FullGridPanel, Ext.grid.EditorGridPanel, {});

I know the post has been answered by Animal but this might be an alternative that helps someone.