PDA

View Full Version : Grid in cellEdit mode. Blur event not detected on tabbing out



sinbar
16 Nov 2011, 8:42 PM
I have a grid in cellEdit mode. I need to detect when an edit cell is losing focus (blur event). On textfield and textarea type columns, blur event is detected when you either tab out of the edit cell or you click on another cell. In numberfield, datefield and combobox type columns, the blur event is detected when you click another cell but is not detected when you tab out of the cell.
To make things worse, after you tab thru few of this kind columns and nothing happens, you click on another cell instead of tabbing out, all the blur events for the fields you tabbed before are fired together.

To reproduce, try this grid. Try to exit edit field either by clicking on other cells or tabbing out and look at the console.

Ext.onReady(function() {
Ext.QuickTips.init();


// sample static data for the store
var myData = [
['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am', 'Shai', 'Inbar'],
['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am', 'Shai', 'Inbar'],
['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am', 'Shai', 'Inbar'],
['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am', 'Shai', 'Inbar'],
['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am', 'Shai', 'Inbar'],
['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am', 'Shai', 'Inbar'],
['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am', 'Shai', 'Inbar'],
['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am', 'Shai', 'Inbar'],
['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am', 'Shai', 'Inbar'],
['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am', 'Shai', 'Inbar']
];




// create the data store
var store = Ext.create('Ext.data.ArrayStore', {
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},
'shai',
'inbar'
],
data: myData
});


// create the Grid
var grid = Ext.create('Ext.grid.Panel', {
store: store,
columnLines: true,

columns: [
{
text : 'Company',
width : 100,
sortable : false,
dataIndex: 'company',
editor: {
xtype: "textfield",
allowBlank: false,
listeners: {
blur: {
scope: this,
fn: function(fld){
console.log('Company field blurred')
}
}
}
}
},
{
text : 'Price',
width : 75,
sortable : true,
dataIndex: 'price',
editor: {
xtype: "numberfield",
allowBlank: false,
listeners: {
blur: {
scope: this,
fn: function(fld){
console.log('Price field blurred')
}
}
}
}
},
{
text : 'Change',
width : 75,
sortable : true,
dataIndex: 'change',
editor: {
xtype: "numberfield",
allowBlank: false,
listeners: {
blur: {
scope: this,
fn: function(fld){
console.log('Change field blurred')
}
}
}
}
},
{
text : '% Change',
width : 75,
sortable : true,
dataIndex: 'pctChange',
editor: {
xtype: "numberfield",
allowBlank: false,
listeners: {
blur: {
scope: this,
fn: function(fld){
console.log('Percent change field blurred')
}
}
}
}
},


{
text : 'Last Updated',
width : 85,
sortable : true,
dataIndex: 'lastChange',
editor: {
xtype: "datefield",
allowBlank: false,
listeners: {
blur: {
scope: this,
fn: function(fld){
console.log('Last update field blurred')
}
}
}
}
},
{
text : 'Name 1',
width : 100,
sortable : false,
dataIndex: 'shai',
editor: {
xtype: "textfield",
allowBlank: false
}
},
{
text : 'Name 2',
width : 100,
sortable : false,
dataIndex: 'inbar',
editor: {
xtype: "textfield",
allowBlank: false
}
}

],

height: 350,
width: 600,
title: 'Grouped Header Grid',
renderTo: 'tcontainer',
viewConfig: {
stripeRows: true
},
plugins: [Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})]


});


});

tobiu
17 Nov 2011, 2:11 AM
please use code tags to preserve the formatting, otherwise it is a pain for us to read it.

do you want me to remove this to the bugreport forum?

sinbar
17 Nov 2011, 5:45 AM
Sure, if it is a bug and not that I was doing something wrong.

What do you mean using code tags?

jsakalos
17 Nov 2011, 7:53 AM
This article explains how to post the code: http://www.sencha.com/learn/legacy/Ext_Forum_Help#How_to_post_code_properly

I'm moving this thread to Bugs.

taavih
27 Aug 2012, 3:11 AM
Any news on this thread? How did you manage with this problem?

Have the same problem in 4.1.1...
Thanks in advance!