PDA

View Full Version : CheckboxSelectionModel (Ext 3.0)



Jack9
19 Aug 2009, 2:19 PM
Assuming html of:

<html><body><div id='testDiv'></div></body></html>

and additional includes as necessary, plus this include or inline...


Ext.onReady(function(){

var sm = new Ext.grid.CheckboxSelectionModel({
header: '',
//width: 50 // Er, are these hidden components?
});

var ds = new Ext.data.Store({
reader: new Ext.data.JsonReader({}, [
{
name: 'name'
},{
name: 'email'
}]),
sortInfo:{
field: 'name',
direction: "DESC"
}, // default sort column
listeners:{
load:function(){
//sm.selectRow(0); // Throws this.grid (sm.grid) is undefined because grid isnt rendered?
}
}
});

ds.loadData(
[{
name: 'Samuel Gompers',
email: '[email protected]'
},{
name: 'Jack Crow',
email: '[email protected]'
},{
name: 'Zack Ziff',
email: '[email protected]'
},{
name: 'Urkel C.',
email: '[email protected]'
},{
name: 'Marilyn Monroe',
email: '[email protected]'
},{
name: 'Kings Ofleon',
email: '[email protected]'
}]
);

var cm = new Ext.grid.ColumnModel([
sm,
{
id:'user-name',
header: "Name",
width: 200,
sortable: true,
dataIndex: 'name'
},{
id:'user-email',
header: "E-Mail",
width: 200,
sortable: true,
dataIndex: 'email'
}
]);

var grid = new Ext.grid.GridPanel({
height:300,
width:400,
loadMask:true,
enableHdMenu:false, // no need for a grid header menu
ds: ds,
sm: sm,
cm: cm,
listeners:{
render:function(){
sm.selectRow(0); // Successful, but no checkmark
}
}
});

grid.render('testDiv');
sm.selectRow(0); // Successful, but no checkmark
});How are you supposed to check rows using a CheckboxSelectionModel in 3.0? Is it only possible using a custom renderer and reloading data?

BitPoet
19 Aug 2009, 10:47 PM
That's a timing issue. Your call to selectRow probably runs before the grid has finished rendering. It should work as expected when you replace your call by


setTimeout(function(){ sm.selectRow(0); }, 1000);

Jack9
20 Aug 2009, 8:50 AM
A timing issue sounds a lot like "ext works inconsistently, for checkboxselectionmodel".

What happens if it takes longer than 1000ms? it fails. Isn't the purpose of the render listener for a post-rendering event? You basically have to guess how long it's going to take?



new Ext.util.DelayedTask(function(){
console.debug("checking");
if(grid.rendered){
console.debug("selecting");
grid.getSelectionModel().selectRow(0);
console.debug("returning");
return true;
}
},this,[grid]).delay(1);
Where would I perform a selection to ensure it happens at the correct time in a serial fashion regardless of the particular data and client behavior in rendering a checkboxselectionmodel applied to a grid? (since I know the render listener and the rendered property is not reliable)

The selectionModel internally tracks the state correctly. Why isn't the correct style applied (checked) when the render fun is executed? This looks like a bug.

BitPoet
20 Aug 2009, 11:15 AM
Right. GridView avoids (for whatever reason) firing an afterrender event. The following seems to work for me:


Ext.override(Ext.grid.GridView, {
afterRender : function(){
if(!this.ds || !this.cm){
return;
}
this.mainBody.dom.innerHTML = this.renderRows() || ' ';
this.processRows(0, true);

if(this.deferEmptyText !== true){
this.applyEmptyText();
}

this.fireEvent('afterrender', this);
}
});


and then in the GridPanel config:


viewConfig: {
listeners: {
afterrender: function(view){
sm.selectRow(0);
}
}
}