PDA

View Full Version : GridPanel with preselected rows



ShatyUT
9 Apr 2010, 7:34 AM
I have been battling with this and can't seem to get it. I have a grid that I want to preselect some rows on when it is displayed. I can get the rows to be selected when I click on a button but I don't want to have to click on the button.

Here is code to reproduce. I would like the 3 rows selected that are specified in the vals variable. I added a button that when clicked will select those rows. How can I get this to work without clicking the button? I even tried putting the row selecting code in the afterrender event of the grid but still no selections.



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Pre-selected list</title>
<link rel="stylesheet" type="text/css" href="../ext311/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="css/ChecklistAdmin.css" />
<script type="text/javascript" src="../ext311/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext311/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
var field_label = 'Value';
var vals = '123,789,ABC';
var storeData = [
[1, '123'],
[2, '456'],
[3, '789'],
[4, 'ABC'],
[5, 'DEF'],
[6, 'GHI'],
[7, 'JKL'],
[8, 'MNO'],
[9, 'PQR'],
[10, 'STU']
];
var listWinStore = new Ext.data.ArrayStore({
fields: [{name: 'id'},{name: 'value'}],
data: storeData
});
var listWinGrid = new Ext.grid.GridPanel({
renderTo: 'content-body',
height: 200,
colModel: new Ext.grid.ColumnModel({
columns: [
{header: field_label, dataIndex: 'value', id: 'valcol'}]
}),
autoExpandColumn: 'valcol',
store: listWinStore,
buttons: [{
text: 'Select',
handler: function() {
var values = vals.split(',');
var indices = new Array();
for (var i = 0; i < values.length; i++) {
var index = listWinStore.find('value', values[i]);
indices[i] = index;
}
listWinGrid.getSelectionModel().selectRows(indices);
}
}]
});
var values = vals.split(',');
var indices = new Array();
for (var i = 0; i < values.length; i++) {
var index = listWinStore.find('value', values[i]);
indices[i] = index;
}
listWinGrid.getSelectionModel().selectRows(indices);
});
</script>
</head>
<body>
<div id="content-body"></div>
</body>
</html>

asp3ctus
9 Apr 2010, 9:27 AM
I know this is NOT teh best way to do it .. but here is a quick solution
replace:
var values = vals.split(',');
var indices = new Array();
for (var i = 0; i < values.length; i++) {
var index = listWinStore.find('value', values[i]);
indices[i] = index;
}
listWinGrid.getSelectionModel().selectRows(indices);

with this:

var selectRows = function() {
var values = vals.split(',');
var indices = new Array();
for (var i = 0; i < values.length; i++) {
var index = listWinStore.find('value', values[i]);
indices[i] = index;
}
listWinGrid.getSelectionModel().selectRows(indices);
}
selectRows.defer(10);

ShatyUT
9 Apr 2010, 9:33 AM
Thanks! That worked. As you said, not exactly the solution I was expecting but it works better than anything I was able to come up with. ;-)

Stormseeker
9 Apr 2010, 6:22 PM
Thanks! That worked. As you said, not exactly the solution I was expecting but it works better than anything I was able to come up with. ;-)

Maybe the viewready event is what you were looking for?

viewready (http://www.extjs.com/deploy/dev/docs/source/GridPanel.html#event-Ext.grid.GridPanel-viewready) : ( Grid this ) Fires when the grid view is available (use this for selecting a default row).

http://www.extjs.com/deploy/dev/docs/?class=Ext.grid.GridPanel&member=viewready

ShatyUT
12 Apr 2010, 8:19 AM
Thanks Stormseeker! That's the answer I was looking for!