Migration from Sencha ExtJS 4.0 to ExtJS 4.1

Question

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
});

and 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 this line this.show();. 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.

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??

Could you share the exact error? Also why do you call this.show() in the "render"? — Johan Haest
The error is "object doesn't support this property or method 'renderChildren()'". And i call it inside the render to only show the window in case that are any items to render inside it. — Miguel Teixeira
Use this event (beforeshow): docs.sencha.com/ext-js/4-1/#!/api/… return false in the event if you don't want to show the window. — Johan Haest

Miguel Teixeira Miguel Teixeira · Accepted Answer · 2012-12-11T13:26:37

0

votes

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

Migration from Sencha ExtJS 4.0 to ExtJS 4.1

1 Answers