[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 (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, 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.

[Jagadeesh2013]

Hi


I have a panel where I can drop the window widgets. The panel is a droppable area. The problem I am facing is, if I drop a window in the panel it works and the window size will be set to the width,height of panel. Now If I want to drop another window and swap the previous one I am not able to do it. Because Already a window is in the panel and I will not be able to trigger the drop event of the panel. Can some one help me please . Also have a look at the screen shot to understand my problem
Picture1.jpg

[olecom]

Hi Mitchell,<br>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.<br>
<br>
I use contrainTo for a reason; it can be set at config time <strong>before</strong> the component exists!

Me too. While on 4.2.1 i've tried many cominations of renderTo/constrainTo. But there are still issues. My one is dynamic constratined windows inside a container with a toolbar on top of it in one viewport border setup. While i achived constraining and no bugs with layout, maximizing gives bottom of the window bellow viewport on height of that top toolbar. Solution is to resize window on maximize event by a constant offset...