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

Question

I'm creating a web application and I want a panel to be perfectly in the center of it's parent panel. I was going through ExtJS5's Kitchen Sink to find layout examples and I found this one.

It places the panel perfectly in the middle, it doesn't cheat using hbox or vbox then setting the pack and align properties to center and middle.

Here is the code he used:

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'
        }
    ]
}

});

And here is how it looks like:

The reason I prefer this is because the width and height of one the first inner panel is purely percent based. If I tried this using hbox or vbox, I would need to set the width or height to a fixed number.

I'm using Sencha Architect and for some reason, I can't find the layout type center for my panel, container, and viewport elements. I've also included the Ext.layout.container.Center in my requires but still no dice.

Does anyone know how to implement this Kitchen Sink example in Sencha Architect?

pagep pagep · Accepted Answer · 2017-01-25T16:51:51

This is a bug https://www.sencha.com/forum/showthread.php?293050

But you can easily overcome any such problems using process config function in SA. Select your class where you want to edit special configs and click on add processCofnig

Next in the generated function you can edit the configs in any way you need.

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

The only disadvantage of using process config is that you will not see the settings set by it in the SA design view - but when you preview the app you will see it.

This is my final code for the 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";
    }

});

This is the result in the browser:

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

1 Answers