new Ext.Window on ExtJS 4.0 vs ExtJS 4.1

[Mteixeira]

I create a window like this

_target = new Ext.Window({                layer: 'top',
                width: _width,
                height: _height,
                constrainTo: aBody,
                constrain: true,
                renderTo: aBody,
                autoScroll: true,
                flex: 1,
                modal: (targetParams.Modal != undefined) ? targetParams.Modal : false,
                resizable: (targetParams.Resizable != undefined) ? targetParams.Resizable : true,
                minimizable: (targetParams.Minimizable != undefined) ? targetParams.Minimizable : true,
                maximizable: (targetParams.Maximizable != undefined) ? targetParams.Maximizable : true,
                closable: (targetParams.Closable != undefined) ? targetParams.Closable : true,
                maximized: _maximized,
                minimzed: _minimized,
                isInFront: true
            });

I noticed that the objects created in each version are quite different. I then do this:

_target.on("render", function (items) {                    if (items.length > 0) {
                        this.show();
                        this.add(items);
                        this.doLayout();
                        var buttonText = targetParams.ButtonText || this.title;
                        createToolbarButton(this.id, buttonText, targetParams.UIConfigurationId);
                    }
                    else {
                        _target.destroy();
                    }
                });

The problem is on the highlighted line. On 4.0 this line calls this function

show : function() {        this.callParent(arguments);
        this.performDeferredLayouts();
        return this;
    },

But on the 4.1 the same line calls another function:

show: function(animateTarget, cb, scope) {        var me = this;


        if (me.rendered && me.isVisible()) {
            if (me.toFrontOnShow && me.floating) {
                me.toFront();
            }
        } else if (me.fireEvent('beforeshow', me) !== false) {
            me.hidden = false;


            
            if (!me.rendered && (me.autoRender || me.floating)) {
                me.doAutoRender();
            }
            if (me.rendered) {
                me.beforeShow();
                me.onShow.apply(me, arguments);


                
                
                if (me.ownerCt && !me.floating && !(me.ownerCt.suspendLayout || me.ownerCt.layout.layoutBusy)) {
                    me.ownerCt.doLayout();
                }
                me.afterShow.apply(me, arguments);
            }
        }
        return me;
    },

In which down the line tries to do

layout.renderChildren()

and then it gives an error.

I think it's obvious that the objects created are different, but i haven't seen this question addressed in the "Upgrade 4.0 to 4.1" document.

So my question is what i have to do to make this work?

Thanks in advance for the help.

[mitchellsimoens]

Why do you have renderTo: aBody, ?

[Mteixeira]

aBody it's the center region of a ViewPort.

EDIT: I've looked a bit further and basically what we have is a main "screen" (the viewport) and we render all the other "screens" to the center region (aBody) of it. We choose window instead of panel, for example, to be able to have multiple "screens" opened at the same time, and give the ability to switch between them easily.

[Mteixeira]

UPDATE:


The app structure after adding the window would look something like this:

ViewPort
    North
        ...
    West
        ...
    Center
        Window
            Panel
                Panel
                    Label
                    ...
                BorderSplitter
                Panel
                    Label
                    ...
            Panel
                List
    South
        ...

I've made some changes to the code and it doesn't generated that error anymore.

 _target.on("beforeRender", function (items) {
                    if (items.length > 0) {
                        _target.add(items);
                        _target.doLayout();
                        var buttonText = targetParams.ButtonText || _target.title;
                        createToolbarButton(_target.id, buttonText, targetParams.UIConfigurationId);
                    }
                    else {
                        _target.destroy();
                    }
                });
                _target.show();
                _target.toFront();

But now it generates another when i call

_target.add(items);

.


The error is "Unable to get the value of property 'dom'" on this line

me.container = container.dom ? container : Ext.get(container);

.


I've tried to analyze the call stack and found out why it give this error. When it calls this function:

renderChildren: function () {
        var me = this,
            items = me.getLayoutItems(),
            target = me.getRenderTarget();


        me.renderItems(items, target);
    },

where "this" refers to the layout object of the window, to where i'm adding the items, the call "getRenderTarget()" returns undefined. Then tries to access the dom property of undefined, throwing the error i mentioned above.


This is where i'm lost because, as you can see, when i'm creating the window i pass an object (aBody) to the renderTo property.


Any ideas??

[Mteixeira]

It had to do with the layout. With layout 'fit' it seems to work.