2

我刚开始使用 ExtJS，所以我在这里问的问题可能很简单。我刚刚完成了Sencha 网站上的汽车教程，现在正在尝试创建一些东西。我添加了一个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，而不是浮动在浏览器的视口中。我该如何解决？

更新

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

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

MyWindow1： http: //pastebin.com/ZznUVZni

4

2 回答 2

1

renderTo: 'MyApp.view.MyViewport',从你的MyWindow班级中删除。这将为您的 Window 定义生成以下代码：

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

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

    initComponent: function() {
      ...
    }
});
于 2013-04-19T18:51:25.070 回答
1

如果要在视口区域（或任何容器）内显示窗口，则需要将 Ext.Window 的属性“约束”设置为 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

于 2013-04-19T17:27:33.687 回答