REQUIRED INFORMATION
Ext version tested:
Browser versions tested against:
- FF 9 (Ubuntu 12.04) firebug 1.9.2 installed
- Chromium 20.0.1132.47 (Ubuntu 12.04)
- IE8 (Windows 7)
DOCTYPE tested against:
Problem 1 - Description:
- If part of some focused component overflowed by another component(or HUD) focus frame of FocusManager situated over this component(HUD)
Problem 1 - Steps to reproduce the problem:
- Run the "Sample 1" in browser
- Scroll "Second panel" to bottom
- "First TextArea" must be partially hidden
- Click on "First TextArea" (blue focus frame must appear)
Problem 1 - The result that was expected:
- Focus frame must be partially hidden relatively to the focused component
Problem 1 - The result that occurs instead:
- Focus frame over the components (HUD) (See first attached picture)
Problem 1 - Test Case (Sample 1):
Code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test extjs project</title>
<link href="http://cdn.sencha.io/ext-4.1.1-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" charset="utf-8" src="http://cdn.sencha.io/ext-4.1.1-gpl/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
Ext.FocusManager.enable(true);
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
height: 554,
width: 690,
title: 'Owner panel',
items: [
{
xtype: 'panel',
height: 217,
title: 'First inner panel',
html: 'Some application text'
},
{
xtype: 'form',
height: 328,
autoScroll: true,
bodyPadding: 10,
title: 'Second inner form panel',
items: [
{
xtype: 'textareafield',
anchor: '100%',
fieldLabel: 'First TextArea'
},
{
xtype: 'textareafield',
anchor: '100%',
fieldLabel: 'Second TextArea'
},
{
xtype: 'textareafield',
anchor: '100%',
fieldLabel: 'Third TextArea'
},
{
xtype: 'textareafield',
anchor: '100%',
fieldLabel: 'Fourth TextArea'
},
{
xtype: 'textareafield',
anchor: '100%',
fieldLabel: 'Fifth TextArea'
}
]
}
]
});
});
</script>
</head>
<body>
</body>
</html>
Problem 2 - Description:
- If you choose some item in combobox by keyboard which situated in some modal component (window or menu), focus frame of FocusManager will move to another componenent (which is not a relative to this one)
Problem 2 - Steps to reproduce the problem:
- Run the "Sample 2" code in browser
- Move to the "Button 2" by keyboard
- Hit Enter on keyboard
- Modal window will appear
- Move to the "First combo" by keyboard
- Choose any value
- Hit Enter or Tab key on keyboard
Problem 2 - The result that was expected:
- Chosen value from "First combo" selected and this combobox focused (with blue focus frame)
Problem 2 - The result that occurs instead:
- When you choose the value from combobox and hit Enter key - focus frame moves to the "First panel"
- When you choose the value from combobox and hit Tab key - focus frame moves to the "Button 1"
Problem 2 - Test Case (Sample 2):
Code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test extjs project</title>
<link href="http://cdn.sencha.io/ext-4.1.1-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" charset="utf-8" src="http://cdn.sencha.io/ext-4.1.1-gpl/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
Ext.FocusManager.enable(true);
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
{
xtype: 'panel',
title: 'First panel',
region: 'center',
bodyPadding: 10,
layout: 'fit',
tbar: [
{
xtype: "button",
text: "Button 1"
},
{
xtype: "button",
text: "Button 2",
handler: function () {
Ext.create('Ext.window.Window', {
title: 'Hello',
height: 200,
width: 400,
layout: 'fit',
modal: true,
items: [
{
xtype: 'form',
items: [
{
xtype: 'combobox',
fieldLabel: 'First combo',
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
store: Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
]
})
},
{
xtype: 'combobox',
fieldLabel: 'Second combo'
}
]
}
]
}).show();
}
},
]
}
]
});
});
</script>
</head>
<body>
</body>
</html>
HELPFUL INFORMATION
Problem 2 - Think the problem in interoperation Ext.view.BoundList dataview with FocusManager.
Screenshot or Video:
See this URL for live test case: http://
Debugging already done:
Possible fix:
Additional CSS used:
Operating System:
First picture for Problem 1 and last four for Problem 2
Focus frame over HUD. Focus frame unacceptable behavior with combobox in modal Cmp.
Reply With Quote
