View Full Version : Nested Grid Click event problem

7 Feb 2012, 1:37 AM
I saw a good plugin from http://www.sencha.com/forum/showthread.php?87555-Nested-Grids-with-RowExpander-in-ExtJS-3.0.
It is great and I used it in my work.
But when I select record in the nested grid, the outer grid's record with the same rowIndex will be selected too.
You can see this situation on the pic.
When I use editor grid instead of grid panel, an error will happen after I click the first column of the nested grid.
And some event will be also fired before any click event is fired.
In the event, the outer cell will be selected and its column index will reduce 1. So, it the first column of nested grid is selected, the outer column index will be -1 and error happens.
I tested many times and found no clues about the mysterious event.
Could any one explain it?
I'm always confused by the event's sequence.
Beg your help:)
PS: I work in ExtJS 3.3
I found 'mousedown' event is the first fired event.
After the nested grid, the outer grid will fire this event too. Then it tries to focus the wrong cell.
How to prevent the outer grid event?

7 Feb 2012, 6:15 AM
You will need to detect which grid it's clicked on and cancel the click on the main grid if it is suppose to be on the child grid.

In Ext JS 4, I do this:

outerGrid.on('beforeselect', function(selModel, rec) {
return !!rec;

As rec was undefined, I put this in the init and in the destroy I removed the listener.

7 Feb 2012, 7:29 AM
Maybe it works in ExtJS 4.0 for the grid has 'beforeselect' event.
But 'beforeselect' event of grid doesn't exist in ExtJS 3.3

7 Feb 2012, 7:53 AM
Just giving you an idea

7 Feb 2012, 8:09 AM
Thanks for your kindness:)

7 Feb 2012, 4:46 PM
Waiting for help :s

9 Feb 2012, 3:19 AM
In the nested grid, I add listeners

cellclick : Ext.createDelegate(function(grid , rowIndex, columnIndex, e ){ e.stopPropagation();
mousedown : Ext.createDelegate(function(e){
and in the outer grid, I add listeners

mousedown : Ext.createDelegate(function(e){ e.stopPropagation();
Then, the outer event isn't propagated.
However, there are still lots of things to do. Any suggestion is welcomed!

8 Jul 2014, 3:04 AM
Old problem, but maybe someone looking for solution (extjs 4.2.1).

Nested grid:

listeners: {
select: function() {
me.stopSelection = true; //some flag XYZ

Outer grid listener:

'msgatrulesgrid': {
beforeselect: function(grid, record, item, index, e, eOpts) {
var textGridPanel = grid.view.up('grid');
if (textGridPanel.stopSelection) { //same flag XYZ
textGridPanel.stopSelection = false;
return false;
select: function(grid, record, item, index, e, eOpts) {
//select action