PDA

View Full Version : Set handler for a Dom Event on a Checkbox rendered into a Grid



thachun
14 Mar 2012, 2:56 AM
Hi all,

I have a custom grid class with 2 columns that one of them is created via the render function like this:


renderer: function (value, metaData, record, rowIndex, colIndex, store, view) {
return Ext.core.DomHelper.markup({
tag: 'input',
type: 'checkbox',
checked: record.data.Selected,
rowIndex: 3
});
}

So now, I want to handle the onChange event on checkbox by a method implemeted in the same Custom class. Please help me!

Cheers,
Thach

vietits
14 Mar 2012, 7:01 AM
// grid config
...
viewConfig: {
listeners: {
refresh: function(view) {
var viewEl = view.getEl();
var count = view.panel.getStore().count();
for(var idx = 0; idx < count; idx++){
var elm = viewEl.getById('checkbox' + idx);
if(elm){
elm.on({
change: function(){
console.log('check change');
}
});
}
}
}
}
},
columns: [{
...
renderer: function (value, metaData, record, rowIndex, colIndex, store, view) {
return Ext.core.DomHelper.markup({
tag: 'input',
id: 'checkbox' + rowIndex,
type: 'checkbox',
checked: true,
rowIndex: rowIndex
});
}
....
}]
...

thachun
14 Mar 2012, 6:06 PM
It seems that your solution can resolve my problem but there is still a minor issue regarding to invoke "viewEl.getById()". It throws an exception that " object has no method 'getById' ". Moreover, I do not see the "refresh" event in the list of events of the Grid component. I suspect that the element here would be different to an element we have worked as normal.

vietits
14 Mar 2012, 6:40 PM
Here I don't config to listen 'fresh' event on grid component but instead I config to listen it on grid view. I do this by using viewConfig. Just look again at my code and you will see that.

thachun
14 Mar 2012, 6:58 PM
Yes, I know and actually when I was debugging it jumped into the handler, but when I inspect the viewEl, it has no method 'getById'.32742

vietits
14 Mar 2012, 7:19 PM
It's strange! getById() is a method of Ext.Element (http://docs.sencha.com/ext-js/4-0/#!/api/Ext.Element-method-getById). What's is your Ext version? I use Ext 4.0.7 and it works well.
You can also switch to use Ext.get() instead.


//var elm = viewEl.getById('checkbox' + idx);
var elm = Ext.get('checkbox' + idx);

thachun
14 Mar 2012, 7:36 PM
I am using ext 4.0 and I tried to switch to the get() method but unfortunately...:-(. Have you run the code above on your machine and it works well, right?

vietits
14 Mar 2012, 7:48 PM
Yes, I use Ext 4.0.7 and Chrome and it works well with an exception that I don't use drag & drop plugin on grid view. Here is my testing code.


Ext.require([
'Ext.grid.*'
]);


Ext.onReady(function(){
var grid = Ext.create('Ext.grid.Panel', {
store: [1,2,3,4,5],
columns: [{
text: 'checkbox',
renderer: function (value, metaData, record, rowIndex, colIndex, store, view) {
return Ext.core.DomHelper.markup({
tag: 'input',
id: 'checkbox' + rowIndex,
type: 'checkbox',
checked: true,
rowIndex: rowIndex
});
}
}],
columnLines: true,
viewConfig: {
listeners: {
refresh: function(view) {
var viewEl = view.getEl();
var count = view.panel.getStore().count();
for(var idx = 0; idx < count; idx++){
// var elm = viewEl.get('checkbox' + idx);
var elm = Ext.get('checkbox' + idx);
if(elm){
elm.on({
change: function(){
console.log(arguments);
}
});
}
}
}
}
},
width: 600,
height: 300,
title: 'Test',
renderTo: Ext.getBody()
});
});

thachun
14 Mar 2012, 8:39 PM
Thanks vietits. I will try with your code to see what's wrong in mine.