Results 1 to 6 of 6

Thread: Error on click in container within toolbar

    Success! Looks like we've fixed this one. According to our records the fix was applied for a bug in our system in a recent build.
  1. #1
    Sencha Premium User StuartAshworth's Avatar
    Join Date
    Feb 2009
    Location
    Glasgow, Scotland
    Posts
    418

    Default Error on click in container within toolbar

    This is essentially a duplicate of the bug EXTJS-21720 which describes the same behaviour in 5.1.3.

    I'm seeing the same behaviour in EXT JS 6.0.2.437 with a simple container within a toolbar - clicking the container throws an error.

    Ext version tested:
    6.0.2.437

    Description:
    If you put a container in a toolbar and click on it, the following error is thrown:

    Code:
    ext-all-debug.js:135665 Uncaught TypeError: Cannot read property 'contains' of undefined

    Problem:

    The targetCmp returns undefined when calling getFocusEl().

    Fiddle:
    https://fiddle.sencha.com/#fiddle/1fv9

    Click the red area in the fiddle to see the error happen

    This is happening on Chrome 52.0.2743.116 (64-bit) on OSX
    SenchaTalk.com - a free Slack community for all things Sencha. Join Now!

    Learn Ext JS 6 with my new ebook - Ext JS 6: Getting Started. Get a Sample Chapter now!

    Need help with Sencha development, code reviews or training? Get in touch!

    [email protected]
    @StuartAshworth9

  2. #2
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,250

    Default

    I just tested this against the 6.x latest, the issue appears to be resolved.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  3. #3
    Sencha Premium User StuartAshworth's Avatar
    Join Date
    Feb 2009
    Location
    Glasgow, Scotland
    Posts
    418

    Default

    Thanks for checking Evan - we'll try and schedule an upgrade to get rid of it.
    SenchaTalk.com - a free Slack community for all things Sencha. Join Now!

    Learn Ext JS 6 with my new ebook - Ext JS 6: Getting Started. Get a Sample Chapter now!

    Need help with Sencha development, code reviews or training? Get in touch!

    [email protected]
    @StuartAshworth9

  4. #4
    Sencha Premium Member
    Join Date
    Jul 2015
    Location
    Boston
    Posts
    9

    Default

    We have encountered this bug and I tried to add in an override to apply the fixed onFocusableContainerMousedown method from the 6.0.3 nightly, but it is not working. Is there something wrong with the way I overrode it?

    The override is being downloaded in the browser, but is not applied. I still get the same exception in the original method.

    We are not able to upgrade to 6.2.x yet (we have unresolved issues with changes/bugs in that release). Is 6.0.3 going to be released soon?

    Code:
    Ext.define('Console.overrides.util.FocusableContainer', {
    
        override: 'Ext.util.FocusableContainer',
    
    
        requires: [
            'Ext.Element'
        ],
    
    
        // Focus bug in ExtJS 6.0.2
        // Bug Report: https://www.sencha.com/forum/showthread.php?321794-Error-on-click-in-container-within-toolbar
        // Override with fixed version of method from ExtJS 6.0.3 nightly build 10/18/2016
        privates: {
            onFocusableContainerMousedown: function (e, target) {
                var targetCmp = Ext.Component.fromElement(target), focusEl = targetCmp.getFocusEl();
    
    
                // focusEl can sometimes be a component (e.g. Filefield returns filebutton).
                // if that happens, we need to retrieve this component's focusableEl
                if (focusEl && focusEl.isComponent) {
                    focusEl = focusEl.getFocusEl();
                }
    
    
                // Capture the timestamp for the mousedown. If we're navigating
                // into the container itself via the mouse we don't want to
                // default focus the first child like we would when using the keyboard.
                // By the time we get to the focusenter handling, we don't know what has caused
                // the focus to be triggered, so if the timestamp falls within some small epsilon,
                // the focus enter has been caused via the mouse and we can react accordingly.
                this.mousedownTimestamp = targetCmp === this ? Ext.Date.now() : 0;
    
    
                // Prevent focusing the container itself. DO NOT remove this clause, it is
                // untestable by our unit tests: injecting mousedown events will not cause
                // default action in the browser, the element never gets focus and tests
                // never fail. See http://www.w3.org/TR/DOM-Level-3-Events/#trusted-events
                // Must also check for mousedowns outside the focusable element
                // but still within the child component. (EXTJS-20297)
                if (targetCmp === this || (!targetCmp.isFocusable() && !this.owns(Ext.Element.getActiveElement())) || (focusEl && !focusEl.contains(target))) {
                    e.preventDefault();
                }
            }
        }
    
    
    });

  5. #5
    Sencha Premium Member
    Join Date
    Jul 2015
    Location
    Boston
    Posts
    9

    Default

    aaaaaaannnnd that doesn't work on a mixin. Is there any way to override that method at all?

  6. #6
    Sencha Premium Member
    Join Date
    Jul 2015
    Location
    Boston
    Posts
    9

    Default

    This fix works for us in 6.0.2:

    Code:
    Ext.define('MyApp.overrides.container.Container', {
    
    
        override: 'Ext.container.Container',
    
    
        requires: [
            'Ext.Element'
        ],
    
    
        initComponent: function() {
            this.callParent(arguments);
    
    
            // Focus bug in ExtJS 6.0.2
            // Bug Report: https://www.sencha.com/forum/showthread.php?321794-Error-on-click-in-container-within-toolbar
            // Override with fixed version of method from ExtJS 6.0.3 nightly build 10/18/2016
            this.onFocusableContainerMousedown = function (e, target) {
                var targetCmp = Ext.Component.fromElement(target), focusEl = targetCmp.getFocusEl();
    
    
                // focusEl can sometimes be a component (e.g. Filefield returns filebutton).
                // if that happens, we need to retrieve this component's focusableEl
                if (focusEl && focusEl.isComponent) {
                    focusEl = focusEl.getFocusEl();
                }
    
    
                // Capture the timestamp for the mousedown. If we're navigating
                // into the container itself via the mouse we don't want to
                // default focus the first child like we would when using the keyboard.
                // By the time we get to the focusenter handling, we don't know what has caused
                // the focus to be triggered, so if the timestamp falls within some small epsilon,
                // the focus enter has been caused via the mouse and we can react accordingly.
                this.mousedownTimestamp = targetCmp === this ? Ext.Date.now() : 0;
    
    
                // Prevent focusing the container itself. DO NOT remove this clause, it is
                // untestable by our unit tests: injecting mousedown events will not cause
                // default action in the browser, the element never gets focus and tests
                // never fail. See http://www.w3.org/TR/DOM-Level-3-Events/#trusted-events
                // Must also check for mousedowns outside the focusable element
                // but still within the child component. (EXTJS-20297)
                if (targetCmp === this || (!targetCmp.isFocusable() && !this.owns(Ext.Element.getActiveElement())) || (focusEl && !focusEl.contains(target))) {
                    e.preventDefault();
                }
            };
        }
    
    
    });

Similar Threads

  1. [FIXED] Error on click in toolbar
    By PBTwo in forum Ext 5: Bugs
    Replies: 3
    Last Post: 28 Jun 2016, 8:21 AM
  2. Replies: 1
    Last Post: 8 Dec 2014, 6:53 AM
  3. container click inside toolbar
    By suryaesh in forum Ext: Discussion
    Replies: 2
    Last Post: 25 Jul 2012, 2:05 AM

Posting Permissions

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