View Full Version : Event problem with RowEditor and in-row action buttons

5 Oct 2009, 12:07 PM
I have a grid that is using the RowEditor, and I would like to place an action button on each row of the grid. For the action button I'm using the first technique described here (not the RowActions plugin): http://www.extjs.com/learn/Ext_FAQ_Grid#How_to_add_a_column_with_tools_for_each_record.3F

(Why didn't I use the RowActions plugin? Because the other technique looked simple enough that I didn't think it justified adding another plugin to the page.)

When the user clicks an action link it opens the message box pertaining to the action but then the event propagates to the RowEditor and it opens the editor. I've tried stopping the click event in the action link click handler, but the editor still opens. I've also tried catching the rowclick event on the grid with the intention of stopping the event if the click target is my action link, but the rowclick event didn't appear to have the action button as the click target.

How do I suppress the rowclick event if the user clicked on the action links, but let it propagate if they click elsewhere in the row?

Thanks for your help.

Here is a code sample that demonstrates the behavior:

// gridtest.js

var userdata = [
['Joe','Smith','[email protected]'],
['Joe','Smith','[email protected]'],
['Joe','Smith','[email protected]'],
['Joe','Smith','[email protected]'],
['Joe','Smith','[email protected]'],
['Joe','Smith','[email protected]'],
['Joe','Smith','[email protected]'],
['Joe','Smith','[email protected]'],
['Joe','Smith','[email protected]']

// create the data store
var store = new Ext.data.ArrayStore({
fields: [
{name: 'FirstName'},
{name: 'LastName'},
{name: 'EmailAddress'}

// create the row editor
var editor = new Ext.ux.grid.RowEditor({
saveText: 'Update',
clicksToEdit: 1,
style : {"z-index" : 7000}, // Fix a bug that the editor overlaps modal windows

// The rest of the RowEditor config options exist solely to resize the grid
// when editing the last line so that the 'Update' and 'Cancel' buttons
// are not hidden. Code came from http://www.extjs.com/forum/showthread.php?p=351659#post351659
listeners: {
move: function(p){ this.resize(); },
hide: function(p){
var mainBody = this.grid.getView().mainBody;
var lastRow = Ext.fly(this.grid.getView().getRow(this.grid.getStore().getCount()-1));
mainBody.setHeight(lastRow.getBottom() - mainBody.getTop(),{
callback: function(){ mainBody.setHeight('auto'); }
afterlayout: function(container, layout) { this.resize(); }
resize: function() {
var row = Ext.fly(this.grid.getView().getRow(this.rowIndex)).getBottom();
var lastRow = Ext.fly(this.grid.getView().getRow(this.grid.getStore().getCount()-1)).getBottom();
var mainBody = this.grid.getView().mainBody;
var h = Ext.max([row + this.btns.getHeight() + 10, lastRow]) - mainBody.getTop();

// create the Grid
var grid = new Ext.grid.GridPanel({
store: store,
stripeRows: true,
autoHeight: true,
width: 600,
layout: 'fit',
border: false,
viewConfig: {
scrollOffset: 0 // Hide the scrollbar placeholder area
plugins: [editor],
columns: [{
header: 'First Name',
dataIndex: 'FirstName',
isEditable: true,
sortable: true,
css: 'cursor:pointer;',
editor: {
xtype: 'textfield',
allowBlank: false
header: 'Last Name',
dataIndex: 'LastName',
isEditable: true,
sortable: true,
css: 'cursor:pointer;',
editor: {
xtype: 'textfield',
allowBlank: false
header: 'Email',
dataIndex: 'EmailAddress',
isEditable: true,
sortable: true,
css: 'cursor:pointer;',
editor: {
xtype: 'textfield',
allowBlank: false
// Action buttons
header: 'Actions',
isEditable: false,
sortable: false,
dataIndex: 'EmailAddress',
renderer: function() {
return '<div class="actionLinks">' +
'<img src="/images/icons/lock_edit.png" alt="Reset Password" ' +
'width="16" height="16" class="action_password" />' +

// Adapted from http://www.extjs.com/learn/Ext_FAQ_Grid#How_to_add_a_column_with_tools_for_each_record.3F
grid.on('click', function(e) {
var btn = e.getTarget('.actionLinks');
if (btn) {
var t = e.getTarget();
var v = this.getView();
var rowIdx = v.findRowIndex(t);
var record = this.getStore().getAt(rowIdx);
var actionName = t.className.split('_')[1];
switch (actionName) {
case 'password':
var fullName = record.data.FirstName + ' ' + record.data.LastName;
var msg = 'Are you sure you want to reset the password for ' + fullName + '?';
title: 'Reset Password',
msg: msg,
buttons: Ext.Msg.YESNO,
animEl: btn

case 'someFutureAction':

// If the action name is anything else, do nothing
}, grid );


(I've arranged the Ext files slightly differently from the standard structure)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<title>Grid Test</title>

<link type="text/css" rel="stylesheet" href="/js/ext/3.0.0/resources/css/ext-all.css"/>
<link type="text/css" rel="stylesheet" href="/js/ext/plugins/themes/css/xtheme-silverishA.css"/>
<link type="text/css" rel="stylesheet" href="/js/ext/plugins/css/RowEditor.css"/>
<script type="text/javascript" src="/js/ext/3.0.0/adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="/js/ext/3.0.0/ext-all-debug.js"></script>
<script type="text/javascript" src="/js/ext/plugins/RowEditor.js"></script>
<script type="text/javascript" src="gridtest.js"></script>

<div id="user-table"> <!-- data table -->

12 Oct 2009, 9:36 PM
+1 for this question.

I'm having the same issue. No EventObject is passed into the RowActions callback so there doesn't appear to be a way to suppress bubbling.

4 Jul 2011, 1:11 AM

Even I am facing same problem. According to Condor's suggestion, I tried to modify roweditor.js file in rowclick event (http://www.sencha.com/forum/showthread.php?119164-Roweditor-action-column) Still I am facing same problem. Please let us know how to rectify this problem.
I have even other issue that after clicking on action column for edit, and when i am trying to edit row, row editor doesn't wotk.