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

Question

我正在创建一个 Web 应用程序，我希望面板完美地位于其父面板的中心。我正在浏览 ExtJS5 的厨房水槽来查找布局示例，我 found this one.

它将面板完美地放置在中间，它不会使用水平盒子或垂直盒子然后将包和对齐属性设置为居中和中间。

这是他使用的代码:

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，由于某种原因，我找不到面板、容器和视口(viewport)元素的布局类型中心。我还在我的 requires 中包含了 Ext.layout.container.Center 但仍然没有骰子。

有人知道如何在 Sencha Architect 中实现这个厨房水槽示例吗？

Answer 1

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

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

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

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

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

这是我的类(class)的最终代码:

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";
    }

});

这是浏览器中的结果: