PDA

View Full Version : new Ext.Window on ExtJS 4.0 vs ExtJS 4.1



Mteixeira
22 Nov 2012, 4:20 AM
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
24 Nov 2012, 6:28 AM
Why do you have renderTo: aBody, ?

Mteixeira
28 Nov 2012, 7:01 AM
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
30 Nov 2012, 9:26 AM
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
4 Dec 2012, 8:30 AM
It had to do with the layout. With layout 'fit' it seems to work.