ExtJS 5.1 - 在厨房水槽中实施居中布局示例？

Question

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

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

这是他使用的代码：

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 中的进程配置功能轻松克服任何此类问题。 Select 您的 class 您想要编辑特殊配置的位置并单击添加 processCofnig

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

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

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

这是我对 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";
    }

});

这是浏览器中的结果：

ExtJS 5.1 - 在厨房水槽中实施居中布局示例？

ExtJS 5.1 - Implementing the Center Layout example in the Kitchen Sink?

javascript

extjs

extjs5

sencha-architect