View Full Version : Add onclick to 'Div'

20 Jun 2012, 3:12 AM
I am trying to add the a 'OnClick' event to a 'div' using its class 'x-grid-group-title'.

I am trying following code:
Ext.onReady(function () {

Ext.select('div.x-grid-group-title').on('click', function (e) {


I don't know why it is not working.
Please help !!
Thanks in advance .....

20 Jun 2012, 6:16 AM
Hi Anmol!

I guess you are not getting anything by Ext.select() .

Try to debug your code by setting a breakpoint and check there what you are getting from

20 Jun 2012, 6:30 AM
Hi Sword,
Ultimately i want to apply a 'OnClick()' event to all the Divs which are having class '.x-grid-group-title'.
So can help me doing that ?

20 Jun 2012, 6:39 AM
Following are also not working:
(1) Ext.query("*[class=bar]");
(2) Ext.query('.x-grid-group-title');

20 Jun 2012, 11:09 AM
Please post help requests in the relevant forums. If you let me know which framework and version you're using I'll move this thread.

I suspect the elements you're trying to grab don't exist at the point you're doing the query. You may find event delegation useful, which is documented here (scroll down a bit to find the details):


20 Jun 2012, 11:04 PM
Hi skirtle,
thanks for your help,
I am using latest Ext Js version.
I will try out the link which you are provided.

20 Jun 2012, 11:13 PM
You can also try to give an event handler to the container element and check if the target contains an identifier of what you're looking for.

container.on('click', function(event, target){
target = Ext.get(target);

20 Jun 2012, 11:19 PM
hi Sword,
Thanks a lot for your help, i will try out that code.
But will that code run for 'grid panel' as i am using that -

Following is my code:

Ext.onReady(function () {
Ext.create('Ext.grid.Panel', {
title: 'Employees',
store: Ext.data.StoreManager.lookup('employeeStore'),
columns: [
{ header: 'Restriction Violation', dataIndex: 'Restriction Violation' },
{ header: 'Positions Violated', dataIndex: 'Positions Violated' }
// ,{ header: 'RestrictionDetails', dataIndex: 'RestrictionDetails' }
features: [{ ftype: 'grouping'}],
width: 300,
height: 475,
renderTo: 'mainHeaderDiv',
var classLinks = Ext.query('.x-grid-group-title'); //This is not working as i said.


20 Jun 2012, 11:28 PM
It's not guarantee that your grid is rendered as soon as it's instantiated. There may be deferred functions inside the grid and probably that's why you cannot find elements that you're looking for.

Try to do the same inside afterrender event. Put that into your GridPanel:

listeners: {
afterrender: function(grid, options){
var links = Ext.query('.x-grid-group-title');

20 Jun 2012, 11:58 PM
Hi Sword,
I already tried that.
Its not working.
That perticular class name is exist but it's just not geting it, dont know why.
If i run above code in 'script' of IE developer toolbar then it works.

21 Jun 2012, 5:06 AM
Using afterrender probably won't be late enough. I imagine the elements you're targeting don't get added until the data is loaded.

There are many ways this could be done but delegation is the easiest. It removes problems with timing or grid refreshes and saves resources by only registering a single listener for the whole grid.

21 Jun 2012, 5:11 AM
You're right. So, he may use container click and check the target if it has the specified class manually, or delegate it, probably it does the checking automatically.

21 Jun 2012, 5:15 AM
Out of curiosity, why can't you use the built-in groupclick event for this?

21 Jun 2012, 5:24 AM
Thanks, Skirtle and Sword.
You guys helped me a lot.
But i still couldn't got the luck (:|

Skirtle, do you have the reference link which explains the 'groupclick '.
Sword, I will surely try that Deligate thing.

Thanks guys, You are great !

21 Jun 2012, 5:31 AM
x-grid-group-title is a CSS class added by the grouping feature. That event is documented here:


The event fires on the grid.

21 Jun 2012, 5:37 AM
Thanks Skirtle, i think now i am getting somewhere.

Thanks Skirtle, Thanks Sword IT.

21 Jun 2012, 6:02 AM
Hi Skirtle and Sword IT.
Just want to ask on question as you help me lot since last many days;
i am working on 'asp.net project' in which we are going to use ExtJs, so it will be a highly interactive website, in other words the ExtJs controls will be populated through code (C# code).
So do you guys think that using 'ExtJs' is a good decision. :-/
Do you guys have any links which explains how to apply the grouping 'key' (column on which grouping will be done) of the grid from C# code.

Thanks in advance guys !