View Full Version : Set rowselect event to "bubbling"

24 Jun 2014, 5:11 AM

My setup:

I have a GridPanel with several columns, the last one of them (created with a renderer) is a HTML button with an 'onclick' event.

var rendererOpenButton = function (
value, metaData, record, rowIndex, colIndex, store) {
return '<input type="button"
+ 'value="Open" '
+ 'onclick="documentoMostrar(' + value +', event)">';

var grid = new Ext.grid.GridPanel(
{header: '', width: 100, sortable: false, dataIndex: 'id',
renderer: rendererOpenButton}

Now, the GridPanel selection model has a 'rowselect' listener;

grid.getSelectionModel().on('rowselect', function(sm, rowIdx, r) {
document.getElementById("imgAnadirDocumento").style.display = "none";

The issue is, if the source of the event is my button, I do not want to fire the 'rowselect' listener (in fact, I do not want to select the column at all).

I have been looking and looks like that I could do that would be attaching the 'rowselect' listener with 'bubbling' model, which would give me the oportunity to stop propagation of the event in the click listener. Unfortunately, it seems that by default the attachment is using the capture model, so the 'rowselect' listener is the first to be called.

Another option could be setting the 'target' of the 'rowselect' event to be the panel itself, but I want that clicks in the rest of the cells trigger the selection behavior, so this does not seem to be a valid solution.

What could I do? I have seen an 'enableBubbling' method, but it is not clear to me how to use it (or even if it is related at all with these issues).

I am using ExtJs 3.0.0.

Thanks in advance.

26 Jun 2014, 5:20 AM
You shouldn't be using onclick attributes on the nodes, you need to setup listeners and delegate to the wanted nodes and then you can stop the event.