Results 1 to 2 of 2

Thread: Spotlight has callbacks documented for show and hide but they are not implemented

    You found a bug! We've classified it as EXTJS-16670 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha User
    Join Date
    May 2009
    Posts
    26

    Default Spotlight has callbacks documented for show and hide but they are not implemented

    Ext version tested:
    • Ext 5.1.0 rev 107

    Browser versions tested against:
    • Firefox latest
    • IE latest
    • Chrome latest

    DOCTYPE tested against:
    • HTML5

    Description:
    • The sencha documentation for Ext.ux.Spotlight shows callbacks for the show and hide methods.
    • http://docs.sencha.com/extjs/5.1/5.1...t.ux.Spotlight
    • These worked fine in Ext JS 3
    • In Ext JS 5.1 (and maybe 4.x) while these are still documented in the docs, the actual code does not have them any more

    Steps to reproduce the problem:
    • See source code for Ext.ux.Spotlight
    • Notice the function signature has callbacks for show and hide method
    • Notice that those function arguments are not used at all

    The result that was expected:
    • Callbacks are expected to be supported as they were in Ext JS 3.x

    The result that occurs instead:
    • Unused function arguments, so nothing happens

    Workaround
    • Please see this fiddle for a potential override/fix: https://fiddle.sencha.com/#fiddle/hei
    • The fiddle also shows an example of it running. Basically after the spotlight has shown, we expect to see an entry in the browser console log.

    That same override is here:

    Code:
    Ext.define('overrides.Ext.ux.Spotlight', {
        override: 'Ext.ux.Spotlight',
        
        /**
         * Show the spotlight
         */
        show: function (el, callback, scope) {
            var me = this;
            
            //get the target element
            me.el = Ext.get(el);
            
            //create the elements if they don't already exist
            if (!me.right) {
                me.createElements();
            }
            
            if (!me.active) {
                //if the spotlight is not active, show it
                me.all.setDisplayed('');
                me.active = true;
                Ext.on('resize', me.syncSize, me);
                me.applyBounds(me.animate, false, callback, scope); // FIX: added callback/scope
            } else {
                //if the spotlight is currently active, just move it
                me.applyBounds(false, false, callback, scope); // FIX: added callback/scope
            }
        },
        
        /**
         * Hide the spotlight
         */
        hide: function (callback, scope) {
            var me = this;
            
            Ext.un('resize', me.syncSize, me);
            
            me.applyBounds(me.animate, true, callback, scope); // FIX: added callback/scope
        },
        
        /**
         * Resizes the spotlight depending on the arguments
         * @param {Boolean} animate True to animate the changing of the bounds
         * @param {Boolean} reverse True to reverse the animation
         */
        applyBounds: function (animate, reverse, callback, scope) {
            var me = this,
                box = me.el.getBox(),
                //get the current view width and height
                viewWidth = Ext.Element.getViewportWidth(),
                viewHeight = Ext.Element.getViewportHeight(),
                i = 0,
                config = false,
                from, to, clone;
            
            //where the element should start (if animation)
            from = {
                right: {
                    x: box.right,
                    y: viewHeight,
                    width: (viewWidth - box.right),
                    height: 0
                },
                left: {
                    x: 0,
                    y: 0,
                    width: box.x,
                    height: 0
                },
                top: {
                    x: viewWidth,
                    y: 0,
                    width: 0,
                    height: box.y
                },
                bottom: {
                    x: 0,
                    y: (box.y + box.height),
                    width: 0,
                    height: (viewHeight - (box.y + box.height)) + 'px'
                }
            };
            
            //where the element needs to finish
            to = {
                right: {
                    x: box.right,
                    y: box.y,
                    width: (viewWidth - box.right) + 'px',
                    height: (viewHeight - box.y) + 'px'
                },
                left: {
                    x: 0,
                    y: 0,
                    width: box.x + 'px',
                    height: (box.y + box.height) + 'px'
                },
                top: {
                    x: box.x,
                    y: 0,
                    width: (viewWidth - box.x) + 'px',
                    height: box.y + 'px'
                },
                bottom: {
                    x: 0,
                    y: (box.y + box.height),
                    width: (box.x + box.width) + 'px',
                    height: (viewHeight - (box.y + box.height)) + 'px'
                }
            };
            
            //reverse the objects
            if (reverse) {
                clone = Ext.clone(from);
                from = to;
                to = clone;
            }
            
            if (animate) {
                Ext.Array.forEach(['right', 'left', 'top', 'bottom'], function (side, i, all) {
                    /* FIX for missing callback support */
                    var listeners = i < all.length - 1 ? {} : {
                        listeners: {
                            afteranimate: {
                                fn: callback || Ext.emptyFn,
                                scope: scope
                            }
                        }
                    }
                    
                    me[side].setBox(from[side]);
                    me[side].animate(Ext.apply({
                        duration: me.duration,
                        easing: me.easing,
                        to: to[side],
                    }, listeners));
                },
                this);
            } else {
                Ext.Array.forEach(['right', 'left', 'top', 'bottom'], function (side) {
                    me[side].setBox(Ext.apply(from[side], to[side]));
                    me[side].repaint();
                    
                    /* FIX for missing callback support */
                    if (callback) {
                        callback.apply(scope); // not sure what arguments to pass here
                    }
                },
                this);
            }
        }
    });
    The drawback to this override is that a lot of the original code had to be copied to inject the required changes. If this can be incorporated back (or improved where needed!) then any other fixes you make to Spotlight won't get lost by this override.

  2. #2
    Sencha User joel.watson's Avatar
    Join Date
    Nov 2014
    Posts
    3,120

    Default

    Thanks for the report! I have opened a bug in our bug tracker.

Posting Permissions

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