Focus frame does not change size relatively focused component

**Qarea** · 12 Nov 2012 8:33 AM

REQUIRED INFORMATION

Ext version tested:

Ext 4.1.0

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:

html

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 attached

See this URL for live test case: http://

Debugging already done:

none

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:

only default ext-all.css

Operating System:

Ubuntu 12.04
Windows 7

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.

Focus frame does not change size relatively focused component

Thread Tools

Search Thread

Display

Threaded View

Focus frame does not change size relatively focused component

Focus frame does not change size relatively focused component

Tags for this Thread