javascript - ExtJs 6 总是显示 ext/modern/modern/src/layout/container/Column.js net::ERR_FILE_NOT_FOUND

Question

我想使用 Extjs 6.5.2 尝试 hello world 示例。当我尝试运行以下代码时

    var containerPanel = Ext.create('Ext.panel.Panel', {
        renderTo: 'app-div1',
        width: 400,
        height: 200,
        title: 'Container Panel',
        layout: 'column',
        suspendLayout: true // Suspend automatic layouts while we do several different things that could trigger a layout on their own
    });

    containerPanel.add({
        xtype: 'panel',
        title: 'Child Panel 1',
        height: 100,
        columnWidth: 0.5
    });

    containerPanel.add({
        xtype: 'panel',
        title: 'Child Panel 2',
        height: 100,
        columnWidth: 0.5
    });
    containerPanel.suspendLayout = false;
    containerPanel.updateLayout();

浏览器控制台抛出有关的错误

ext/modern/modern/src/layout/container/Column.js net::ERR_FILE_NOT_FOUND

即使我尝试在 app.js 中导入包

Ext.application({
    name: 'MyApp',
    extend: 'MyApp.Application',

    requires: [
        'MyApp.*',
        'Ext.panel.Panel',
        'Ext.layout.container.Column'
    ]
});

我发现ext-6.5.2-Trial.zip在\ext\modern\modern\src\layout<中没有包含container文件夹.

我可以知道在使用Ext.panel.Panel组件之前我是否错过了任何步骤吗？谢谢。

Answer 1

对于经典版，您需要在 app.js Ext.panel.Panel 和 Ext.layout.container.Column 中删除这两行>。如果您需要，您可以在经典 View 中使用require。

在 modern工具包没有 column 布局，但在 classic 中有当前列布局Ext.layout.container.Column 。

请引用此 FIDDLE 这与 Ext.panel.Panel 上的 layout:column 属性一起使用。

var containerPanel = Ext.create('Ext.panel.Panel', {
    renderTo: Ext.getBody(),
    width: 400,
    height: 200,
    title: 'Container Panel',
    layout: 'column'
});

// Suspend automatic layouts while we do several different things that could trigger a layout on their own
containerPanel.suspendLayouts(true); //you can also use like this.
containerPanel.add({
    xtype: 'panel',
    title: 'Child Panel 1',
    height: 100,
    columnWidth: 0.5
},{
    xtype: 'panel',
    title: 'Child Panel 2',
    height: 100,
    columnWidth: 0.5
});
containerPanel.resumeLayouts(true);