ExtJS 5.1 - 在厨房水槽中实现中心布局示例？

Question

我正在创建一个 Web 应用程序，我希望一个面板完美地位于其父面板的中心。我正在通过 ExtJS5 的 Kitchen Sink 查找布局示例，我 found this one.

它将面板完美地放置在中间，它不会使用 hbox 或 vbox 作弊，然后将 pack 和 align 属性设置为 center 和 middle。

这是他使用的代码：

Ext.define('KitchenSink.view.layout.Center', {
extend: 'Ext.container.Container',
requires: [
    'Ext.layout.container.Center'
],
xtype: 'layout-center',

width: 500,
height: 400,

layout: 'center',

items: {
    title: 'Centered Panel: 75% of container width and 95% height',
    border: true,
    layout: 'center',
    scrollable: true,
    width: '75%',
    height: '95%',
    bodyPadding: '20 0',
    items: [
        {
            title: 'Inner Centered Panel',
            html: 'Fixed 300px wide and full height. The container panel will also autoscroll if narrower than 300px.',
            width: 300,
            height: '100%',
            frame: true,
            bodyPadding: '10 20'
        }
    ]
}

});

下面是它的样子：

我更喜欢这个的原因是因为第一个内部面板的宽度和高度完全基于百分比。如果我尝试使用 hbox 或 vbox，我需要将宽度或高度设置为固定数字。

我正在使用 Sencha Architect，但由于某种原因，我找不到面板、容器和视口元素的布局类型中心。我还在我的requires 中加入了Ext.layout.container.Center，但仍然没有骰子。

有人知道如何在 Sencha Architect 中实现这个 Kitchen Sink 示例吗？

Answer 1

这是一个错误https://www.sencha.com/forum/showthread.php?293050

但是您可以使用 SA 中的进程配置功能轻松克服任何此类问题。 选择您要编辑特殊配置的班级，然后单击添加 processCofnig

接下来在生成的函数中，您可以根据需要以任何方式编辑配置。

processMyContainer: function(config) {
    config.layout = "center";
}

使用流程配置的唯一缺点是您不会在 SA 设计视图中看到它设置的设置 - 但是当您预览应用程序时，您会看到它。

这是我最后的课程代码：

Ext.define('MyApp.view.MyContainer', {
    extend: 'Ext.container.Container',
    alias: 'widget.mycontainer',

    requires: [
        'MyApp.view.MyContainerViewModel',
        'Ext.panel.Panel'
    ],

    viewModel: {
        type: 'mycontainer'
    },
    height: 800,
    width: 600,

    initConfig: function(instanceConfig) {
        var me = this,
            config = {
                items: [
                    me.processMainPAnel({
                        xtype: 'panel',
                        height: '95%',
                        width: '75%',
                        bodyPadding: '20 0',
                        title: 'Centered Panel: 75% of container width and 95% height',
                        items: [
                            {
                                xtype: 'panel',
                                height: '100%',
                                html: 'Fixed 300px wide and full height. The container panel will also autoscroll if narrower than 300px.',
                                width: 300,
                                bodyPadding: '10 20',
                                title: 'Inner Centered Panel'
                            }
                        ]
                    })
                ]
            };
        me.processMyContainer(config);
        if (instanceConfig) {
            me.getConfigurator().merge(me, config, instanceConfig);
        }
        return me.callParent([config]);
    },

    processMainPAnel: function(config) {
        config.layout = "center";
        return config;
    },

    processMyContainer: function(config) {
        config.layout = "center";
    }

});

这是浏览器中的结果：