PDA

View Full Version : [4.2.0] Extjs button tabIndex + FocusManager.enable()



whitemage
1 May 2013, 1:46 AM
Ext version tested:


Ext 4.2.0

Browser versions tested against:

Firefox

Description:

You have several Buttons with tabindex > 0. The FocusManager is enabled. When you press tab the focus isn't put on the buttons.
Worked in 4.1
Put the project allowing to test the case: 43455

slemmon
1 May 2013, 12:19 PM
I'm not seeing a difference between 4.1 and 4.2 in your test case:
Can you elaborate on the steps you are taking to reproduce the issue as well as expected versus observed behavior?



Ext.FocusManager.enable();
test1 = Ext.create('Ext.Button', {
x: 0,
y: 0,
width: 100,
text: 'Click me 1',
tabIndex: '12',
handler: function () {
alert('You clicked the button!');
}
});
test2 = Ext.create('Ext.Button', {
x: 30,
y: 30,
width: 100,
text: 'Click me 2',
tabIndex: '13',
handler: function () {
alert('You clicked the button!');
}
});


var win = new Ext.Window({
top: 102,
left: 354,
width: 400,
height: 250,
title: "Test",
//layout:"align",
maximizable: true,
minimizable: true,
closeAction: "hide",
onEsc: null,
modal: true,
items: [test1, test2]
});


var winMain = new Ext.Window({
top: 124,
left: 233,
width: 1280,
height: 960,
// layout:"align",
closeAction: "hide",
onEsc: null,
cls: "x-window-full",
border: 0,
frame: true,
title: "",
closable: false,
collapsible: false,
draggable: false,
minimizable: false,
maximizable: false,
maximized: true,
minWidth: 1024,
minHeight: 780,
modal: false,
renderTo: Ext.getBody(),
items: [win]
});


winMain.show("", null, null);
win.show("", null, null);

whitemage
2 May 2013, 12:00 AM
I should have detailed a bit more. Since the first example wasn't the best to test. (You had to click first, to have the focus and then you could click tab to see it work or not).

I put a new example : 43466. You have to click in the edit "Name". Then you press tab.

4.1 :
In pressing tab, the focus change from the edit to the button. Then by pressing tab again, it goes to the next button. It is the expected behavior.

4.2
In pressing tab, the focus don't go to the button. Which is not the expected behavior.


New example



test3 = Ext.create('Ext.form.field.Text', {
x: 0,
y: 120,
width : 300,
name: 'name',
fieldLabel: 'Name',
tabIndex: '14',
});

Ext.FocusManager.enable();
test1 = Ext.create('Ext.Button', {
x: 0,
y: 0,
width : 100,
text: 'Click me 1',
tabIndex: '12',
handler: function() {
alert('You clicked the button!');
}
});
test2 = Ext.create('Ext.Button', {
x: 0,
y: 60,
width : 100,
text: 'Click me 2',
tabIndex: '13',
handler: function() {
alert('You clicked the button!');
}
});

var win=new Ext.Window({
top:102,
left:354,
width:400,
height:250,
title:"Test",
//layout:"align",
maximizable:true,
minimizable:true,
closeAction:"hide",
onEsc:null,
modal:true,
items: [test1,test2,test3]
});

var winMain =new Ext.Window({
top:124,
left:233,
width:1280,
height:960,
// layout:"align",
closeAction:"hide",
onEsc:null,
cls:"x-window-full",
border:0,
frame:true,
title:"",
closable:false,
collapsible:false,
draggable:false,
minimizable:false,
maximizable:false,
maximized:true,
minWidth:1024,
minHeight:780,
modal:false,
renderTo: 'editor-grid',
items: [win]
});

winMain.show("",null,null);;
win.show("",null,null);;

jchristen
2 May 2013, 6:58 AM
I have similar problem with Ext.grid.Panel.

Test case :
Go to Ext.grid.Panel documentation page, edit first code editor just by adding "Ext.FocusManager.enable(true);"



Ext.FocusManager.enable(true);

Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ 'name': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"home@simpsons.com", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});

Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});



Click on panel header, it obtains focus frame. Then, press TAB many times :

4.1.1: pressing TAB move focus frame from panel header to grid columns header, then to grid content, and then to panel header again (and loop again and again) -> OK
4.2.0: pressing TAB move focus frame from panel header to grid columns header, then disapear (but seems to be on grid content), and then is lost in full page -> KO

slemmon
7 May 2013, 11:20 AM
@whitemage
The issue you're seeing appears to be fixed in 4.2.1 Beta.

@jchristen
It appears I'll need to open a bug report for the issue you're demonstrating.
EXTJSIV-9743

extjs@kingsquare.nl
3 Jul 2013, 4:53 AM
Bug confirmed here: Focusmanager breaks default use of tabindex.