PDA

View Full Version : Selecting row from grid on 'viewready'



cougar83
19 Oct 2010, 10:46 PM
Hi Forum,

I have a question regarding to a default row selection after loading a grid with data. As suggested in the following post, I tried this solution, but it didn't work (http://hamisageek.blogspot.com/2009/01/extjs-tip-select-first-row-when-grid-is.html).

Here is my code:



[...]
Ext.onReady(function(){
var store = new Ext.data.JsonStore({
url: 'data.json',

//JsonReader configs
root: 'data',
fields: ['foo', 'bar']
});
store.load();

var mygrid = new Ext.grid.GridPanel({
renderTo: 'mydiv',
frame: true,
title: 'Fußballvereine',
height: 200,
width: 400,
store: store,
columns: [{
header: "Foo,
dataIndex: 'foo'
}, {
header: "Bar",
dataIndex: 'bar',
sortable: true
}]
});

mygrid.on('viewready', function() {
mygrid.getSelectionModel().selectFirstRow();
mygrid.getView().focusRow(0);
});
});
[...]
<body>
<div id="mydiv"></div>
</body>
[...]


The row isn't selected at all. Only sometimes, it seems to be working ... perhaps it depends on the load order???

Any suggestions? Thank you in advance.

Condor
19 Oct 2010, 10:54 PM
Yes, in your case I recommend configuring the grid with

viewConfig: {deferRowRender: false}
and use the store load event to select the first row.

cougar83
19 Oct 2010, 11:32 PM
Hi Condor, thank you for your quick reply. I changed my code with your suggestions but get new obstacles. After I added the event 'load' to the store, I could not call store.load(); anymore (store.load is not a function)... How could I instantiate the store properly?

This is my event 'load' in the JsonStore:


load: {
fn: function(store, records, options) {
mygrid.getSelectionModel().selectFirstRow();
mygrid.getView().focusRow(0);
}
}

Condor
19 Oct 2010, 11:41 PM
I think you forgot to specify the load event handler INSIDE 'listeners'.

cougar83
19 Oct 2010, 11:55 PM
You're right. THANKS! But now I have to figure out how to remove my infinite loop. :-)

bldoron
9 Sep 2012, 2:17 AM
@Condor: your advice works even better than listening to viewready, as viewready doesn't apply the selection on store reload.

I just put this in my store:

listeners: { load: function(){
var grid = Ext.ComponentQuery.query('my-grid-alias')[0];
grid.getSelectionModel().select(0);
}
},

It's too bad that 'selectFirstRow()' doesn't exist anymore.
It kind of breaks the MVC pattern I'm following, but hey... It works.