Search code examples
javascriptextjsextjs4extjs4.1extjs4.2

Ext.window.MessageBox draggable false, error calling hide method


After creating an instance of MessageBox like this

var msgBox = Ext.create('Ext.window.MessageBox',{draggable: false}); 

-actually draggable false was set through an override to Ext.window.Window, I'm putting it like this to make it easier to reproduce.

- also I do prefer the singleton syntax but there are already a ton of instances created like this in the code I'm working on.

   msgBox.alert("I am a bug, try to close me to reproduce");

Trying to close this MessabeBox calls the hide method:

hide: function() {
        var me = this;
        me.dd.endDrag();
        me.progressBar.reset();
        me.removeCls(me.cfg.cls);
        me.callParent(arguments);
    },

which throws the following error:

Cannot read property 'endDrag' of undefined

Am I missing something or this is a bug?

UPDATE:

I'm using ExtJs 4.1.1 (but also happens in Extjs 4.2.1 (fixed on 4.2.2))

Any ideas or comments ?


Solution

  • To avoid this error I'm overriding hide method on MessageBox class:

            Ext.define('Ext.window.MessageBox', {
                override: 'Ext.window.MessageBox',
                hide : function () {
                    /**
                     * this is the default implementation of hide in minus MessageBox the commented line
                     * */
                    var me = this;
                    //me.dd.endDrag();
                    me.progressBar.reset();
                    me.removeCls(me.cfg.cls);
                    /**
                     * this is the implementation of hide in Ext.Component
                     * avoided callParent() because that would have called the overridden hide method
                    */
                    me.showOnParentShow = false;
                    if (!(me.rendered && !me.isVisible()) && me.fireEvent('beforehide', me) !== false) {
                        me.hidden = true;
                        if (me.rendered) {
                            me.onHide.apply(me, arguments);
                        }
                    }
                    return me;
                }
            });
    

    Update, this was the original override

    Ext.window.Window.override({
        initComponent: function () {
            this.draggable = false;
            this.resizable = false;
            this.callParent();
        }
    });
    

    I'm open to suggestions to avoid this override. Thanks.