[Ext:4.1 Beta] Window, renderTo with constrain bug

[anton.dimitrov]

In the following example you can observe how a window is rendered to, and constrained to a tab panel within viewport.
Unfortunately, When `renderTo` is used some strange abnormal activity is observed with the window positioning. If we change the position of the window, then the 'constrain property' is applied (i suppose) with the X and Y coordinates of the viewport rather than the tab. This results in rendering the window.

Howeer, if we use 'constrainTo', the window is constrained properly, but not rendered within the tab.

To reproduce, just go to : http://localhost/ext-4.1.0-beta-1/docs/index.html#!/api/Ext.container.Viewport (http://localhost/ext-4.1.0-beta-1/docs/index.html#%21/api/Ext.container.Viewport) (there are no online beta docs so you will have to test on localhost)
and change the 'live example' code with this one :



Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [{
region: 'north',
html: '<h1 class="x-panel-header">Page Title</h1>',
autoHeight: true,
border: false,
margins: '0 0 5 0'
}, {
region: 'west',
collapsible: true,
title: 'Navigation',
width: 150
// could use a TreePanel or AccordionLayout for navigational items
}, {
region: 'south',
title: 'South Panel',
collapsible: true,
html: 'Information goes here',
split: true,
height: 100,
minHeight: 100
}, {
region: 'east',
title: 'East Panel',
collapsible: true,
split: true,
width: 150
}, {
region: 'center',
xtype: 'tabpanel', // TabPanel itself has no title
activeTab: 0, // First tab active by default
items: {
title: 'Default Tab',
html: 'The first tab\'s content. Others may be added dynamically',
listeners: {
afterrender: function (tab){
Ext.create('Ext.window.Window', {
title: 'Hello',
height: 200,
width: 400,
layout: 'fit',
constrain: true,
renderTo: tab.getEl(),
items: { // Let's put an empty grid in just to illustrate fit layout
xtype: 'grid',
border: false,
columns: [{header: 'World'}], // One header just for show. There's no data,
store: Ext.create('Ext.data.ArrayStore', {}) // A dummy empty data store
}
}).show();
}
}

}
}]
});

[mitchellsimoens]

Apparently the way to properly do this is to add the window as an item, so I have been told:


Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [{
region: 'north',
html: '<h1 class="x-panel-header">Page Title</h1>',
autoHeight: true,
border: false,
margins: '0 0 5 0'
}, {
region: 'west',
collapsible: true,
title: 'Navigation',
width: 150
// could use a TreePanel or AccordionLayout for navigational items
}, {
region: 'south',
title: 'South Panel',
collapsible: true,
html: 'Information goes here',
split: true,
height: 100,
minHeight: 100
}, {
region: 'east',
title: 'East Panel',
collapsible: true,
split: true,
width: 150
}, {
region: 'center',
xtype: 'tabpanel', // TabPanel itself has no title
activeTab: 0, // First tab active by default
items: {
title: 'Default Tab',
html: 'The first tab\'s content. Others may be added dynamically',
listeners: {
afterrender: function (tab){
var win = Ext.create('Ext.window.Window', {
title: 'Hello',
height: 200,
width: 400,
layout: 'fit',
constrain: true
});

tab.add(win);

win.show();
}
}

}
}]
});

[anton.dimitrov]

10x for the response:) Indeed it does the job.

If this is the case, and the right way is 'adding the component' then the docs must be updated, because the info there is wrong, at least for 4.1 Beta. In 4.0.7 the `renderTo` worked fine.

Cheers

[mitchellsimoens]

There was a lot of work done in 4.1.0 on this.

[westy]

Hi Mitchell,

Sorry for butting in here, but spotted the thread whilst looking for mine in this forum whilst filling out the survey...

Whilst I've also heard the answer the "proper" way to do this is the add the component as a child of the container, I don't buy it.

I use contrainTo for a reason; it can be set at config time before the component exists!
Yes, I managed to work around it for some things, but it's still not right in my opinion, and feel that the issue is being fobbed off a little quickly. More here (http://www.sencha.com/forum/showthread.php?170779-Drag-amp-drop-or-resize-of-windows-rendered-in-container-is-wrong&p=708916&viewfull=1#post708916), with my example...

I use it to keep windows and tooltips on their own viewport card, so they do not follow you when changing page... If it was a acknowledged bug in 4.0.2a then it's still a bug in 4.1.0!

Cheers,
Westy

[BStramke]

This issue still exists in 4.1beta2. It also happens when you define it inside the Items of the container. If you constrain it and use autoShow: true it wont be constrained. Even if you do it inside the afterrender event:



listeners: {
afterrender: function(component) {
var w1 = Ext.create('Ext.Window', {
title: 'Window 1',
height: 200,
width: 400,
constrain: true,
autoShow: true
});
component.add(w1);
}
}

This will work:


listeners: {
afterrender: function(component) {
var w1 = Ext.create('Ext.Window', {
title: 'Window 1',
height: 200,
width: 400,
constrain: true/*,
autoShow: true*/
});
component.add(w1);
w1.show();
}
}

[BStramke]

Also exists in 4.1b3.