Place a modal window in viewport

Question

I just started ExtJS, so it might be very trivial what I ask here. I just completed the cars tutorial from the Sencha website and am now trying to create something. I have added a Viewport as initial view, and in there I placed a Panel that holds all my widgets:

Ext.define('MyApp.view.MyViewport', {
    extend: 'Ext.container.Viewport',

    layout: {
        type: 'fit'
    },
    ...
});

I also created a Window that can be opened by clicking a button:

Ext.define('MyApp.view.MyWindow', {
    extend: 'Ext.window.Window',

    height: 185,
    renderTo: 'MyApp.view.MyViewport',
    width: 334,
    layout: {
        type: 'absolute'
    },
    title: 'My Window',

    initComponent: function() {
      ...
    }
});

And the onclick handler is like this:

var wind = new MyApp.view.MyWindow();
wind.modal = true;
wind.show();

The problem is, when I open the window, it is rendered inside the Viewport, under all panels, instead of floating in the browser's viewport. How do I fix that?

Update

I created a new Window using the Sencha Architect and open that in the same way. It works as expected. When looking at the separate .js files of MyWindow and MyWindow1, I see no real difference though.

MyWindow: http://pastebin.com/yE9V1twc

MyWindow1: http://pastebin.com/ZznUVZni

Solution 1

If you want show a window inside to viewport region (or any container), need to set property "constrain" of Ext.Window to true and render it on container dom element. For example:

// your window
Ext.define('MyApp.view.MyWindow', {
    extend: 'Ext.window.Window',
    ...
    constrain: true,
    ...
});

//your viewport
Ext.define('MyApp.view.MyViewport', {
extend: 'Ext.container.Viewport',

...

initComponent: function() {
    var me = this;
    this.callParent();
    me.on({
        afterrender: function() { <-- or do it in the handler of the button
            Ext.create('MyApp.view.MyWindow', {
                renderTo: me.getComponent('vp-center').getEl()// <-- see itemId of center region
            }).show();
        }
    });
},

items: [{
    region: 'center',
    title: 'Center region',
    itemId: 'vp-center'
}]

...

See full example on jsfiddle: http://jsfiddle.net/MNFJn/

Also you can add your window as a item of viewport region. See sources in sencha example: http://docs.sencha.com/extjs/4.2.0/extjs-build/examples/layout/border.html?theme=gray

Solution 2

Remove renderTo: 'MyApp.view.MyViewport', from your MyWindow class. This will result in below code for your Window definition:

Ext.define('MyApp.view.MyWindow', {
    extend: 'Ext.window.Window',

    height: 185,
    width: 334,
    layout: {
        type: 'absolute'
    },
    title: 'My Window',

    initComponent: function() {
      ...
    }
});

Comments

[Bart Friederichs]

Adding constrain worked, it is no longer rendered outside the viewport. It is still not draggable though. And it is rendered in the bottom-left corner.

[Bart Friederichs]

Also, adding a completely new window (I am using Sencha Architect), creates a MyWindow that works as expected.

[Bart Friederichs]

This has no effect whatsoever.