PDA

View Full Version : [OPEN-680] DateField tab blur failure when inside RowEditor



The0s
3 Mar 2010, 12:38 PM
First of all, what is the policy about reporting bugs from classes from the ux namespace which have the ext copyright is in the header? Is this the right place?
Anyways:

Setup:
3.1.1 / ext-adapter / no custom css / firefox 3.5.8 / XP pro

Description:
When tabbing through a row of inputs using Ext.ux.grid.RowEditor, inputs of type Ext.form.DateField do not lose focus when tabbing to the next field. Left clicking on a field will assert the correct focus state for all the inputs, however.

Test:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<title id='title'>Title</title>

<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="../../ux/resources/css/row-editor.css">

<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all-debug.js"></script>
<script type="text/javascript" src="../../ux/grid/RowEditor.js"></script>

<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '../resources/images/default/s.gif';

Ext.onReady(function(){

var store = new Ext.data.ArrayStore({
fields:[
{name: 'first', type:'string'},
{name: 'period_start', type:'date'},
{name: 'period_end', type:'date'},
{name: 'last', type:'string'}
],
data:[
['foo',new Date(),new Date(),'bar'],
['foo',new Date(),new Date(),'bar'],
['foo',new Date(),new Date(),'bar'],
['foo',new Date(),new Date(),'bar'],
]
});

var editor = new Ext.ux.grid.RowEditor({
clicksToEdit:2,
monitorPoll:1000

});

var tf1 = new Ext.form.TextField({id:'tf1'});
var tf2 = new Ext.form.TextField({id:'tf2'});
var df1 = new Ext.form.DateField({id:'df1'});
var df2 = new Ext.form.DateField({id:'df2'});


var fn = function (field) { console.log(field.id +' blur'); }
tf1.addListener('blur', fn);
tf2.addListener('blur', fn);
df1.addListener('blur', fn);
df2.addListener('blur', fn);

var grid = new Ext.grid.GridPanel({
frame: true,
store: store,
plugins:[editor],
columns: [{
dataIndex:'first',
header:'FIRST',
editor: tf1
},{
dataIndex:'period_start',
header:'PE',
xtype: 'datecolumn',
editor: df1
},{
dataIndex:'period_end',
header:'PS',

xtype: 'datecolumn',
editor: df2
},{
dataIndex:'last',
header:'LAST',
editor: tf2
}]
});

var view = new Ext.Viewport({
layout:'border',
items:[{
region:'center',
layout:'fit',
items:[grid]
}]
});
});
</script>
</head>
<body>
</body>
</html>
Reproduction:
1) double click on a row
2) select the first input.
3) tab through all the inputs.
4) look at firebug and see that only the TextFields fire a 'blur' event from the tabbing.

I logged to console on blur to test each input. You can also test visually by seeing that the 'focus' graphics of the DateField are still active even though its not really the active field (eg, both date fields have focus graphics)

Expected Result:
firebug console:


tf1 blur
df1 blur
df2 blur
tf2 blur
Actual:


tf1 blur
tf2 blur
Screenshots:
Screenshot006 is step 1, Screenshot007 is step 4




Debugging already done:
This is not issue does not occur when using an EditorGridPanel, or DateFields inlined into a panel.

Debugging update:
It seems that the RowEditor pulls the Editors it uses from the GridPanel using getEditor(). These editors are instances of GridEditor, which assert control of tab behavior of the field via the private monitorTab attribute (see Ext.grid.GridEditor constructor). This is fine for an EditorGrid, since it handles the tab behavior by passing such tab events to it's column selection model via SelectionModel.onEditorKey(), but RowEditor does not do any such selection logic. I do not fully understand the functionality of monitorTab on certain Field types since its not documented, but the below code seems to fix this problem.

Crappy workaround (prolly will break other stuff):
RowEditor.js, somewhere around line 281


if(ed instanceof Ext.form.TriggerField)
ed.monitorTab = true;
this.insert(i, ed);

Jamie Avins
3 Mar 2010, 2:01 PM
UX components are considered experimental, bugs opened on them are usually a low priority and are categorized separately in our database.