Как создать custom layout
 

Стоит задача на создание кастомного лейаута. Ни один из существующих типов не подходит. Требуется особое расположение элементом (items) в контейнере.

Собственно сам вопрос, как правильно создавать свои лейауты? Что-то документация не сильно мне помогла. Пока вот накидал для теста. Но даже это валит ошибку

Ext.Loader.setConfig({
        enabled: true
    });

    Ext.require([
        'Ext.tree.*',
        'Ext.data.*',
        'Ext.tip.*',
        'Ext.grid.*',
        'Ext.panel.*'
    ]);

    Ext.onReady(function() {
        Ext.QuickTips.init();

        var items = [];

        Ext.define('mytestlayout', {
            extend: 'Ext.layout.container.Container',
            // renderTpl: [
            //     '<div id="{ownerId}-innerCt">',
            //         '{%this.renderBody(out, values)%}',
            //         '<div>1321321</div>',
            //     '</div>'
            // ]
        });

        Ext.create('Ext.panel.Panel', {
            id: '123',
            renderTo: Ext.getBody(),
            title: 'title',
            layout: {
                type: 'mytestlayout'
            },
            width: '100%',
            height: 300,
            border: 1,
            items: [
                {}
            ]
        });

    });

во-первых,

alias: ['layout.mytestlayout']

во-вторых, метод calculate нужно определить.

а еще надо обязательно установить
type: 'matrix' // название кастомного лейаута

calculate определил. Но мне бы хоть какой-то мини примерчик. Что за чем делать. Пока раскручиваю исходники самого экста, но это длительный путь.

Вовсе необязательно.
http://docs.sencha.com/ext-js/4-1/so...-layout-Center

Странно, но в примере нигде не определен метод calculate.

В примере наследование от Ext.layout.container.Fit