View Full Version : Handling an event in HTML Component Like Button

28 Jun 2012, 5:14 AM
I have a HTML Button Included in side a cell of a grid , but how will i be able to handle the events?

If i am able to handle the HTML components most of my work will be solved,

Ext.getCmp('#exmID').on( ) .... returns null, is there anything else or is there any specific place where i am supposed to put the function


28 Jun 2012, 5:15 AM

return "<div style='background-color:#FFFFFF; color:#000000;'>"+value+"</div>";
return "<div style='background-color:#FE3939; color:#000000;'>"+value+"%...<input id='123' type='Button' value='Accept'/></div>";

28 Jun 2012, 6:04 AM
If I were you I would do like this:

var cellId = Ext.id();
//I recomend this for color
if (...){
backgroundColor = 'FFFFFF';
if (...){
color = '000000';

metadata.tdAttr = Ext.String.format('style="background-color: {0}!important; color:#000000; color:{1}!important;"', backgroundColor, color );

var el = Ext.get(cellId );
if (el){
el.on('click', function() {
alert('click on cell')
}, el, {stopEvent: true}
}, 50);
return "<div id = '"+cellId +"' >"+value+"</div>";

But better idea is to listen cellclick event on grid.

28 Jun 2012, 8:53 PM
No I dnt have any problem in rendering the color, the problem is handling an event in the HTML elements, not extjs element, hw to handle them in extjs?

where should we the onclick event and how?

...<input id='123' type='Button' value='Accept'/> how will i be able to handle this button click in EXTJS 4.1, besides there is no cellclick event on Grid panel, its available only for table

29 Jun 2012, 11:32 AM
Please read my code again and maybe you can find the answer.

2 Jul 2012, 9:36 PM
Your code works great for rendering the color, but the cellclick event is not handled... even the alert doesnt appear!

Dont know why?

3 Jul 2012, 12:28 AM
It can't be.
When you click on text inside div you should see an alert.
I thought that you can put a cellId to your button (<button id="+cellId+">), but you didn't even try this. Ok than I try to explain. When you render button you don't have it's id. But if you render button with id, and then after 50 milisec (Ext.defer(...)) get dom element by id you can easily attach event.
Happy coding!

3 Jul 2012, 1:18 AM
Hi Romick,

Thank you for explaining. I found it userful.

4 Jul 2012, 12:49 AM
Sorry For the trouble.... the problem was spacing between the ' " +cellId+ " ' in the first code, I didnt notice it that time
But now.... yeah the Code worked great!!! its useful for handling any HTML element!!

10 Jul 2012, 6:15 AM
Be carefull with this approach.

In case you are adding DOM listeners, make sure they get removed properly when refreshing the GridView (or destroying the GridPanel).

I strongly recommend to use only 1 click listener for the wohle gridview and delegate down to your target elements (by tag name, CSS class,...).

best regards

11 Jul 2012, 3:20 AM
You can delegate event from input:

Ext.create('Ext.data.Store', {
fields:['name', 'email', 'phone'],
{ 'name': 'Lisa', "email":"[email protected]", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"[email protected]", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"[email protected]", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"[email protected]", "phone":"555-222-1254" }
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'

var grid = Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
text: 'Name',
dataIndex: 'name',
renderer: function (value) {
return value + ' <input class="accept" type="button" value="Accept">';
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
height: 200,
width: 400,
renderTo: Ext.getBody(),
viewConfig: {
listeners: {
el: {
delegate: 'input.accept',
click: function (e) {
var view = grid.view,
node = e.getTarget(view.itemSelector, 10),
record = view.getRecord(node);