Question

我刚开始使用ExtJS，所以我在这里要求的内容可能非常简单。我刚从Sencha网站完成了cars tutorial，现在我正在努力创造一些东西。我添加了一个Viewport作为初始视图，在那里我放置了一个Panel来保存我的所有小部件：

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

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

我还创建了一个可以通过单击按钮打开的Window：

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内呈现，而不是浮动在浏览器的视口中。我该如何解决这个问题？

更新

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

MyWindow：http://pastebin.com/yE9V1twc

MyWindow1：http://pastebin.com/ZznUVZni

Answer 1

如果要在视口区域（或任何容器）中显示一个窗口，需要将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/

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

Answer 2

从renderTo: 'MyApp.view.MyViewport',课程中删除MyWindow。这将导致您的窗口定义的代码如下：

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

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

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

在视口中放置一个模态窗口

2 个答案: