Results 1 to 4 of 4

Thread: Focus frame does not change size relatively focused component

Threaded View

Previous Post Previous Post   Next Post Next Post
    Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-7741 in aria-
  1. #1
    Ext JS Premium Member
    Join Date
    Nov 2011
    Vote Rating

    Default Focus frame does not change size relatively focused component


    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

    • 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:

    <!DOCTYPE html>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Test extjs project</title>
            <link href="" rel="stylesheet" type="text/css" />
            <script type="text/javascript" charset="utf-8" src=""></script>
            <script type="text/javascript">
            Ext.onReady(function() {
                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',


    Screenshot or Video:
    • See attached

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

    Debugging already done:
    • none

    Possible fix:
    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 () {
    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.
    Attached Images Attached Images
    Last edited by Qarea; 12 Nov 2012 at 9:44 AM. Reason: Possible solution and additional bug behavior.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts