2 Attachment(s)
Focus frame does not change size relatively focused component
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:
Description:
- If focused component had changed width or height or both of them, focus frame of FocusManger does not change own sizes accordingly new component sizes.
Steps to reproduce the problem:
- Run the sample in browser
- Click on textarea(focus it)
- Resize browser window
Steps to reproduce the problem (2):
- Run the sample in browser
- Click on textarea(focus it)
- Use mouse to resize panels by moving split line between panels
The result that was expected:
- Focused component should change width/height
- Focus frame should change width/height accordingly focused component
The result that occurs instead:
- Focused component changed width/height
- Focus frame does not change width/height and have old sizes
Test Case:
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.0-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.0-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',
layout: 'border',
items: [
{
xtype: 'panel',
title: 'First panel',
region: 'west',
width: 280,
collapsible: true,
split: true,
},
{
xtype: 'panel',
title: 'Second panel',
region: 'center',
bodyPadding: 10,
layout: 'fit',
items: [
{
xtype: 'textarea',
}
],
}
]
}
]
});
});
</script>
</head>
<body>
</body>
</html>
HELPFUL INFORMATION
Screenshot or Video:
See this URL for live test case: http://
Debugging already done:
Possible fix:
Code:
MyApp.refreshFocusFrame = function () {
if (Ext.FocusManager.focusedCmp) {
var cmp = Ext.FocusManager.focusedCmp;
//to see FocusManager source!
Ext.FocusManager.focusTask.delay(10, null, null, [cmp, cmp.getFocusEl()]);
}
};
// Refresh focus frame after component resize
Ext.override(Ext.AbstractComponent, {
listeners: {
resize: function () {
MyApp.refreshFocusFrame();
}
}
});
Additional CSS used:
Operating System:
Related bug behavior:
Same focus frame bug you can see with modal windows. Just open one. Set focus on it. And then resize it(or move to another location by window header). Window sizes will be changed(window will be moved) . But focus frame will stay on the same position with old size values.
