CODEWITHSUNDEEP
extjswindowmodal-dialogviewport
Bart Friederichs
Bart Friederichs

Reputation: 33491

Place a modal window in viewport

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

Upvotes: 2

Views: 13336

Answers (2)

vahissan
vahissan

Reputation: 2332

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() {
      ...
    }
});

Upvotes: 1

Vlad
Vlad

Reputation: 3645

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

Upvotes: 1

Related Questions