PDA

View Full Version : How to speed up rendered Checkbox in Grid?



giraffezw
8 Sep 2010, 4:02 AM
does it make a different in performance if i render the checkbox like


new Ext.grid.RowNumberer()
,{
header: '<input type=\'checkbox\' id="headerCheckbox" />'
,fixed: true
,width: 25
,sortable: false
,hideable:false
,groupable:false
,menuDisabled: true
,dataIndex: 'checked'
,renderer: function(value) {
var checked = 'checked';
if(value == false || value == 'false'){
checked = '';
}
return "<input type='checkbox'" + checked + ">";
}
},...
or set a CSS class with un-/checked images?
In a Grid with 200 entries it takes about 4-5sec I-| to check the checkboxes.
Here the Code


,selectAll: function() {
var gs = Ext.StoreMgr.get('tablestore');
for (var i=0; i < gs.getCount(); i++) {
var rec = gs.getAt(i);
rec.set('checked',true);
rec.commit();
}
} //eo function selectAll
Or have you any other ideas.:-/

Condor
8 Sep 2010, 4:05 AM
Why not use an Ext.ux.grid.CheckColumn (in examples/ux/CheckColumn.js)?

It doesn't use <input>s, which are notoriously slow in browsers.

giraffezw
8 Sep 2010, 4:32 AM
i don't know... :">
The json data are initially checked=false, but the Grid show's checked=true
and it is just as fast, maybe even slower :(


,new Ext.grid.CheckColumn({
header: '<input type=\'checkbox\' id="headerCheckbox" />'
,fixed: true
,width: 25
,sortable: false
,hideable:false
,groupable:false
,menuDisabled: true
,dataIndex: 'checked'
})
But the function to check the entries is quiet simple (just a loop), i see no way to optimize :-/:-/

Condor
8 Sep 2010, 4:44 AM
CheckColumn expects the field value to be Boolean and not String.

You can fix this by defining your field as type:'bool'.

giraffezw
8 Sep 2010, 5:06 AM
unfortunately it makes no difference :(


,new Ext.grid.CheckColumn({
header: '<input type=\'checkbox\' id="headerCheckbox" />'
,fixed: true
,width: 25
,type:'bool'
,sortable: false
,hideable:false
,groupable:false
,menuDisabled: true
,dataIndex: 'checked'
})
does not belong here but I have seen in the CheckColumn.js

// register ptype
Ext.preg('checkcolumn', Ext.ux.grid.CheckColumn);where is the difference to

Ext.reg('savedsearchgrid', Ext.kv73.savedSearchGrid);

Condor
8 Sep 2010, 5:21 AM
1. A CheckColumn is both a column and a plugin, so you need to use:

var checkColumn = new Ext.grid.CheckColumn({...});
var grid = new Ext.data.GridPanel({
...
plugins: [checkColumn],
columns: [
...
checkColumn,
...
]
});
In Ext 3.3 you no longer need to register it as a plugin.

2. The type:'bool' should be in 'checked' field definition and not in this column config!

giraffezw
8 Sep 2010, 5:29 AM
OMG
ps. The type:'bool' should be in 'checked' field definition and not in this column config! :(( <- fixed

i found a other post from you


2. If you are changing almost all records in a store then it is faster to use:


store.suspendEvents();
// update records
store.resumeEvents();
grid.getView().refresh();
;)

giraffezw
8 Sep 2010, 5:47 AM
now it is fast enough :) thx

FCTim
8 Sep 2010, 6:59 AM
In Ext 3.3 you no longer need to register it as a plugin.

Thank you!