How to capture change event on ext.grd.panel items

[funnyfox]

Hi

I have a grid with 5 columns
I want to set a variable whenever some change has happened on any column.
The doubleClick event is firing, but I cannot get keypress/keydown event.
Can anyone help me


Ext.define('tz.ui.BillingRateGrid', {
extend : 'Ext.grid.Panel',
height : 350,
width : '100%',
initComponent : function() {
var me=this;
var flag='notdirty';

this.cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 2
});


this.columns = [ {
text : 'Name',
width:300,
dataIndex : 'name',
tabIndex:0,
//I want to set the flag when a key is pressed on the item/ when the data is changed
listeners: {
dblClick: function(field, value) {
me.flag='dirty';
}
},
editor: {
allowBlank: false
}
},


{
text : 'Rate',
width : 200,
dataIndex : 'rate',
renderer: 'usMoney',
value : 0,
tabIndex:1,
listeners: {
dblClick: function(field, value) {
me.flag='dirty';
}
},
editor: {
xtype: 'numberfield',
allowBlank: false,
minValue: 0,
maxValue: 100000
}
} ,


{
text : 'Start Date',
width : 100,
dataIndex : 'startDate',
xtype: 'datecolumn',
format:'m/d/Y',
tabIndex:2,
listeners: {
dblClick: function(field, value) {
me.flag='dirty';
}
},
editor: {
xtype: 'datefield',
format: 'm/d/y'
}
} ,{
text : 'End Date',
width : 100,
dataIndex : 'endDate',
xtype: 'datecolumn',
format:'m/d/Y',
tabIndex:3,
listeners: {
dblClick: function(field, value) {
me.flag='dirty';
}
},
editor: {
xtype: 'datefield',
format: 'm/d/y'
}
},{
text : 'Comments',
width:250,
dataIndex : 'comments',
tabIndex:4,
listeners: {
dblClick: function(field, value) {
me.flag='dirty';
}
},
editor: {
allowBlank: true
}
} ];

[vietits]

Below is an example of capturing keypress/keydown/keyup events on field editor.


columns: [{
text: 'Name',
flex: 1,
dataIndex: 'name',
editor: {
xtype: 'textfield',
allowBlank: false,
listeners: {
keyup: {
element: 'el',
fn: function(){
console.log('keyup');
}
},
keydown: {
element: 'el',
fn: function(){
alert('keydown');
}
},
keypress: {
element: 'el',
fn: function(){
alert('keypress');
}
}
}
},

However, with your case it's better to capture the 'edit' event on grid and then check to see whether or not the underlying record is dirty.

[funnyfox]

Can you give me an example for capturing edit event on grid.

keypress/keyup/keydown - none of these work on the grid columns

[vietits]

Something likes this:


Ext.define('tz.ui.BillingRateGrid', {
extend : 'Ext.grid.Panel',
height : 350,
width : '100%',
listeners: {
edit: function(editor, event){
var grid = event.grid;
var record = event.record;
grid.flag = record.dirty ? 'dirty' : 'nodirty';
}
},
initComponent : function() {
var me=this;
var flag='notdirty';

[funnyfox]

No this isn't working. This is not firing when I change anything on the grid.

[vietits]

"edit" event only fires when you complete editing cell or row on grid. It does not fire when you press a key. See more information abou this event here: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.Panel-event-edit

[funnyfox]

That doesn't fire even after the change.

Can you give an example for using grid.on

[vietits]

FYI.


Ext.onReady(function(){
var store = Ext.create('Ext.data.Store', {
fields: ['id', 'name'],
data: [{
id: 1,
name: 'Name 1'
},{
id: 2,
name: 'Name 2'
}],
});
var grid = Ext.create('Ext.grid.Panel', {
store: store,
height: 300,
width: 400,
title: 'Demo',
renderTo: Ext.getBody(),
listeners: {
edit: function(editor, event){
var grid = event.grid;
var record = event.record;
console.log('edit', grid, record, record.dirty)
}
},
plugins : [{
ptype: 'rowediting',
clicksToEdit : 1
}],
columns: {
items: [{
text : 'Name',
flex : 1,
dataIndex: 'name',
editor : 'textfield'
}]
}
});
});