PDA

View Full Version : [OPEN] Dataview / BoundList differences in event order in FF and Chrome



Ozone
5 Oct 2011, 4:35 AM
Hi.

I have noticed that beforeitemkeydown (and itemkeydown) of Ext.view.BoundList is executed differently in Firefox and Chrome. In Firefox it is executed before the normal behaviour of the arrow keys, but in Chrome it looks like it is executed AFTER the normal arrow behaviour.

Here is the description of the problem, with a simplified case:
REQUIRED INFORMATION


Ext version tested:

Ext 4.0.6


Browser versions tested against:

FF7.0.1 for Ubuntu (firebug 1.8.3 installed)
Chrome v12.0.742.112 (90304) Ubuntu 11.04


Description:

Seems there is difference in the order of the events in Ext.view.View and Ext.view.BoundList (beforeitemkeydown and itemkeydown) between Firefox and Chrome.


Steps to reproduce the problem:

Load the page in a browser
Click on the textfield
Move left by pressing left arrow a couple of times
Move right by pressing right arrow a couple of times
Notice when the console.log messages are printed
Try the same in both Chrome and Firefox, and acknowledge that the console.logging is done at different records in the two browsers.


The result that was expected:

Ideally I would expect the left and right arrow to switch focus between the three elements of the dataview and the inputfield. So pressing right arrow when the last element is selected would focus the inputfield.

There should under no circumstances be a higher level difference between the two browsers. I guess I would have expected all 'beforeXXX' eventhandlers to be treated _before_ any changes in the GUI, so the behaviour in Firefox is actually what I would have expected. (Except for the not-halting-normal-behaviour-on-return-false)


The result that occurs instead:

in Chrome it seems like beforeItemKeydown is invoked AFTER the selection has changed and not before.


Test Case:




Ext.onReady(function () {
Ext.create('Ext.panel.Panel', {
layout: 'fit',
renderTo: Ext.getBody(),
items: [
{
xtype: 'container',
itemId: 'myContainer',
title: 'blablabla',
items: [
{
xtype: 'dataview',
itemId: 'myView',
tpl: '<ul><tpl for="."><li class="x-boundlist-item">[{display}]</li></tpl></ul>',
itemSelector: 'li',
enableKeyEvents: true,
store: Ext.create('Ext.data.Store', {
queryMode: 'local',
fields: ['id', 'display'],
data: [
{'id': '1st', 'display': 'test1'},
{'id': '2nd', 'display': 'test2'},
{'id': '3rd', 'display': 'test3'}
]
}),
listeners: {
beforeitemkeydown: function (view, record, item, idx, e) {
if (e.getKey() === e.RIGHT) {
if (record === this.getStore().last()) {
// this happens before changing the selection in FireFox but after changing the selection in Chrome.
console.log('in FireFox you would now have the first element selected - in Chrome you have the third element selected!');
console.log('And in neither case the normal behaviour has been disabled by returning false.')
//this.getSelectionModel().deselectAll();
Ext.ComponentQuery.query('textfield')[0].focus();
e.stopEvent();
return false; // According to the API, this should be sufficient to stop the normal behaviour of the event.
}
}
return true;
}
}
}, {
xtype: 'textfield',
itemId: 'myTextField',
enableKeyEvents: true,
listeners: {
'specialkey': function (field, e) {
if (e.getKey() === e.LEFT) {
var mView = Ext.ComponentQuery.query('dataview')[0];
mView.getSelectionModel().select(mView.getStore().last())
mView.focus();
}
}
}
}
]
}
]
});
});





Additional CSS used:


<style>
div, ul, li{
display:inline;
}
li{
margin-right:5px;
}
.x-item-selected{
color: red;
}
</style>


Operating System:

Ubuntu 11.04

/Ozone

Ozone
5 Oct 2011, 4:48 AM
Also returning false from the beforeitemkeydown does not seem to stop anything at all. I don't know if I am supposed to make another bugreport for this, or if it is enough that I just write it here? :-/