PDA

View Full Version : renderer in Column Model



shak
24 Jun 2010, 8:06 AM
Hello,
I'm new with Ext JS and I have one question. In a column I'm displaying an image (which it works), but I want that image to call a function when it is clicked. The function sayHello(), is declared above the column model. When I click on the image in my grid, I get an error saying that the sayHello function is not defined. I'll appreciate any help with this. Thanks.


function sayHello(){
alert("Hello");
};
var columnModel = ([
{
header : 'Actions',
dataIndex : 'actions',
renderer: function(v, params, record){
return "<img src='resources/images/customers_icon.gif' qtip='View customers' onclick=\"sayHello();\" /> ";
},
//id : 'firstName',
//sortable : true,
hideable : false,
width : 75
}
]);

jay@moduscreate.com
27 Jun 2010, 10:17 AM
Ah globals. not cool!

try window.sayHello = function(){}.

mankz
27 Jun 2010, 10:31 AM
Don't use inline onclick event handler, try this:


var columnModel = ([
{
header : 'Actions',
dataIndex : 'actions',
renderer: function(v, params, record){
return "<img src='resources/images/customers_icon.gif' class="someClass" qtip='View customers'/> ";
},
//id : 'firstName',
//sortable : true,
hideable : false,
width : 75
}
]);

yourGrid.on('cellclick', function(g, row, col, e) {
if (e.getTarget('.someClass')) {
alert('Hello');
}
});