View Full Version : How to bubble a button "click" event to GridPanel "cellclick" event?

16 Mar 2011, 12:37 PM
I have a custom Button in the cell of a custom GridPanel. I can attach a "cellclick" event to the grid cell, but clicking the button (within the cell) does not trigger the GridPanel cellclick event.

I am trying to use Button 's "bubbleEvents" config option but am not sure how to tie it to the GridPanel cellclick event that I'm listening to.

Here's the pic worth a thousand words. I want to click on the button and have the GridPanel cellclick listener return the cell's text (i.e. "Block 1A2B3C"). Currently, clicking in the cell -- if not on the button -- will return what I need.

I'm using this on the GridPanel creation, which is working if I don't click on the button:

listeners: {

'cellclick' : function(grid, rowIndex, columnIndex, e) {
var record = grid.getStore().getAt(rowIndex); // Get the Record
var fieldName = grid.getColumnModel().getDataIndex(columnIndex); // Get field name
var data = record.get(fieldName);
and this is the code in my custom button config that doesn't seem to work:

bubbleEvents : ['click']
Thanks in advance!

<edited 3/17/2011>

An update on my slow, slow progress :-)

I have a custom Button, in a custom Panel, residing in a custom GridPanel cell. I want to click the button, which will trigger the GridPanel's "cellclick" event, thus allowing me to see the content in the cell.

I have bubbled (bubbleEvents) the Button's "click" event so it is now captured by the Panel's click listener. I can then fire (fireEvent) the GridPanel's "cellclick" event.... however.....

... the 'rowIndex' below is always '-1' and the 'columnIndex' is always 'false'. Obviously I'm doing something wrong ;-)

How can I extract the proper rowIndex and columnIndex?

Code snippet for custom Panel (click bubbled up from custom Button)
(g_gridAllSrs is a global var)

listeners: {
'click': function(obj, e){
var record = g_gridAllSrs.getSelectionModel().getSelected();
var rowIndex = g_gridAllSrs.store.indexOf(record);
var columnIndex = g_gridAllSrs.view.findCellIndex(e.getTarget());

g_gridAllSrs.fireEvent('cellclick', g_gridAllSrs, rowIndex, columnIndex, e);