PDA

View Full Version : Load dynamically created Grid with Selected



Jack9
7 Oct 2009, 3:39 PM
If I'm creating grids based on the structure of returned JSON, I'm essentially adding grids as the load() event of a store is executing. I can't find a simple way to mark records that I load into those grids, at load time. SelectionModel.selectRecords takes records, and SM.selectRows requires me to know the position of a row, rather than being able to simply pass an array of id's. There's a function called isIdSelected (http://www.extjs.com/forum/../deploy/dev/docs/source/RowSelectionModel.html#method-Ext.grid.RowSelectionModel-isIdSelected) which seems kinda strange, since I can't find a way to select and Mark Selected by id.

How do you mark records selected at load time in a dynamically created grid?

mitchellsimoens
7 Oct 2009, 6:34 PM
what do you mean mark?

Jack9
8 Oct 2009, 8:04 AM
new Ext.grid.GridPanel({
...
sm: new Ext.grid.CheckboxSelectionModel({}),
ds: new Ext.data.Store({
// How do you indicate which records should be marked in the CBSM automatically?
...
listeners:{
load:function(){
// now I always have to iterate through the entire store and mark each record individually
// based on matching ID, making isIdSelected seem pointless since I can't actually
// use something like selectById()...except it doesnt work because the grid isnt rendered yet
}
}
}),
listeners:{
// cant use show, render, etc to mark selected. I have no idea how I'm supposed to mark records selected
// I have to figure out a way to render grids dynamically, then load the data, then mark them selected?
}
})
I thought "mark selected at load time" was self-explanatory.

Jack9
8 Oct 2009, 2:29 PM
So there's no way to declare a field that the selectionModel can look at to identify selected when looking at the DataSource or to otherwise select when loading data?

It is difficult to mark selections in dynamically created components when data loading is asynchronous but selectionModels only work on static data.

Jack9
9 Oct 2009, 12:19 PM
Ultimately, I create my GUI according to the data structure, embed the data into each store (so load() is executed immediately), then at the grids, I call a fun...





Ext.onReady(function(){
var masterStore = new Store({
...
listeners:{ load:function(){
foreach(elementIndicatingAgrid){
var store = new Store({
data: elementIndicatingAgrid.data
...
listeners:{
load:function(){
var selectedArr = new Array();
foreach(data as element){
if(element.selected){
selectedArr.push(element)
}
}
this.se = selectedArr;
}
}
});

var grid = new Grid({
...
,listeners:{
afterrender:function(thisGrid){
setTimeout("markSelected(Ext.getCmp('"+thisGrid.id+"'))",300);
}
}
});
}
}}});//end master store.
masterStore.load();
});


function markSelected(grid)
{
grid.getSelectionModel().selectRows(grid.getStore().se);
}
This is the only way that consistently works (timeout is dependent on how fast the browser is in creating components).