Search code examples
selectextjsgridextjs4nested

What ExtJS 4.2 standard function gets executed for grid selection when using Ext.selection.RowModel (default) selModel?

There is a bug with the way the Ext.grid.Panel rowexpander plugin works when a nested grid is set to renderTo to the rowexpander div id.

When this is implemented, it's difficult to see what is actually being selected. The reason for this is because the config "disableSelection" and "trackMouseOver" are to be both considered for highlighting. I have to set "trackMouseOver: false" so that hovering over grid rows doesn't interfere with reproducing this behavior. Then "disableSelection: false" must be set so that this selection issue does actually occur.

The issue is that when you select index 1 of the nested grid of parent grid index 0 row, index 1 row of parent grid is selected as well. If you select index 2 of the nested grid of parent grid index 0 row, index 2 of parent grid is selected as well.

When 935424 is selected, 815138 is selected since they are both index 0.

When 1056257 is selected, 1013525 is selected since they are both index 1.

When 1200191 is selected, 1261631 is selected since they are both index 2.

I'm suspecting that the selection model instance might be getting shared with the grid and nested grids since I'm using the same definition. They are of course different instances of the same definition, but I'm not sure how the framework handles additional grids using Ext.create?

I'd like to ask how to fix it or get me close, I'll be up-voting you (often). But if you can at least give me a clue as to where this selection function is being called in the framework, that will get me on the right track and can debug and discover a fix for it. I've read that events can bubble, and maybe that's what's happening here. It seems to have a handle on the row as well, because when I double click the nested grid row, it not only tries to expand that row, but also the row from the parent grid row (that matches the row index).

enter image description here

enter image description here

enter image description here

Solution

  • After any recursive nested grid is created, I had to call this line so the click and dblclick (and others) events don't bubble/propagate to the parent grid.

    grid[cnt].getEl().swallowEvent(['mouseover', 'mousedown', 'click', 'dblclick', 'onRowFocus']);