PDA

View Full Version : [FIXED-1194] Ext.Window.focus () "contains" check is broken.



the.jxc
11 Aug 2010, 3:08 AM
This is a bug that was discovered while asking a "how to" question in
Thread 106537 (http://www.sencha.com/forum/showthread.php?106537-Cannot-get-focus-into-a-TextField-in-a-popup-window).

The bug is demonstrated by the following complete "app":


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="http://extjs-public.googlecode.com/svn/tags/extjs-3.2.1/release/resources/css/ext-all.css" />
<script type="text/javascript" src="http://extjs-public.googlecode.com/svn/tags/extjs-3.2.1/release/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://extjs-public.googlecode.com/svn/tags/extjs-3.2.1/release/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady (function () {
var popupw = new Ext.Window ({
defaultButton: 'Name',
width: 300, height: 120,
items: [{
xtype: 'panel', border: false,
layout: 'form', labelWidth: 100, labelAlign: 'right',
items: [
{ id: 'Name', itemId: 'Name', fieldLabel: 'Name', xtype: 'textfield', tabIndex: 0 }
]
}]
});
popupw.setVisible (true);
popupw.focus ();
});
</script>
</head>
<body>
<div id="extjs" style="width: 300; height: 300">
</div>
</body>
</html>

The "defaultButton" invokes .focus() correctly. But .focus() does not work.

In the code for .focus() at line 25604 of ext-all-debug.js (3.2.1) there is the following test:

Code:
if (el && ct) {
if (!Ext.lib.Region.getRegion(ct).contains(Ext.lib.Region.getRegion(el.dom))){
return;
}
}

Courtesy of Chrome's debugger:

"el" (which is the textfield "Name" which I wanted to have focus).

Code:
Ext.lib.Region.getRegion(el.dom)
Object
0: 589
1: 412
bottom: 434
left: 589
right: 726
top: 412

while ct (a HTMLBodyElement, the <body> element for my entire page)

Code:
Ext.lib.Region.getRegion(ct)
Object
0: 0
1: 0
bottom: 0
left: 0
right: 1254
top: 0

My parent HTML Body is small. Actually, it has zero height. But the same problem would occur with 400 pixel height.

The "contains" code says my text field is not contained in the HTML Body, so it can't have focus.

I think this is definitely wrong. The test should be comparing the text field against the popup window element, not against the top-level HTML Body.

For convenience, this code is available at:

http://www.nsquared.co.nz/demo/misc/focus_test.html

The "Name" component does not receive focus, even though it should. My testing shows this is broken on.

- IE (windows)
- Chrome (linux)
- FireFox (linux)

Animal
11 Aug 2010, 6:24 AM
Yes, it's thinking that the bottom pixel of the body is zero.

The Region class needs to treat the <body> differently.

It has the rather confusing choice of using

Ext.lib.Dom.getViewHeight()

or

Ext.lib.Dom.getDocumentHeight()

or

Ext.lib.Dom.getViewportHeight()

To get the correct height of the body.

Animal
11 Aug 2010, 6:26 AM
Upon reading the code, there are differences. It should use

Ext.lib.Dom.getViewportHeight()