Question

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

它将面板完美地放在中间，它不会使用hbox或vbox作弊然后设置包并将属性对齐到中间和中间。

以下是他使用的代码：

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，由于某些原因，我无法找到面板，容器和视口元素的布局类型中心。我还在Ext.layout.container.Center中添加了requires，但仍然没有骰子。

有没有人知道如何在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";
    }

});

这是浏览器中的结果：

ExtJS 5.1 - 在Kitchen Sink中实现Center Layout示例？

1 个答案: