extjs - 在视口(viewport)中放置一个模态窗口

Question

我刚刚开始使用 ExtJS，所以我在这里问的问题可能非常微不足道。我刚刚完成了cars tutorial来自 Sencha 网站，现在正在尝试创建一些东西。我添加了一个 Viewport 作为初始 View ，并在其中放置了一个 Panel 来保存我的所有小部件:

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

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

我还创建了一个可以通过单击按钮打开的窗口:

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

onclick 处理程序如下:

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

问题是，当我打开窗口时，它会在所有面板下的视口(viewport)内呈现，而不是 float 在浏览器的视口(viewport)中。我该如何解决这个问题？

更新

我使用 Sencha Architect 创建了一个新的窗口，并以相同的方式打开它。它按预期工作。当查看 MyWindow 和 MyWindow1 的单独 .js 文件时，我发现没有真正的区别。

我的窗口:http://pastebin.com/yE9V1twc

我的窗口1:http://pastebin.com/ZznUVZni

Answer 1

如果你想在视口(viewport)区域(或任何容器)内显示一个窗口，需要将 Ext.Window 的属性“constrain”设置为 true 并将其渲染在容器 dom 元素上。 例如:

// 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'
}]

...

查看 jsfiddle 上的完整示例:http://jsfiddle.net/MNFJn/

您还可以将窗口添加为视口(viewport)区域的项目。请参阅 sencha 示例中的来源: http://docs.sencha.com/extjs/4.2.0/extjs-build/examples/layout/border.html?theme=gray