How to write custom layout in ExtJs 4 or 3

I want to write my own layout.. (like vbox, border and so one)... What i want to do is to create layout that will place it's content in the middle (verticall - middle, horisontal - middle)..

Is there some one who could show me how this control will look like in extJs or can provide some links that may be usefull?

I have this example from

http://dev.sencha.com/deploy/dev/examples/layout-browser/layout-browser.html

Ext.ux.layout.CenterLayout = Ext.extend(Ext.layout.FitLayout, {
// private
setItemSize : function(item, size){
    this.container.addClass('ux-layout-center');
    item.addClass('ux-layout-center-item');
    if(item &&am开发者_运维技巧p; size.height > 0){
        if(item.width){
            size.width = item.width;
        }
        item.setSize(size);
    }
}
});

Ext.Container.LAYOUTS['ux.center'] = Ext.ux.layout.CenterLayout;

But it gives me more questions than answers.. What is setItemSize How it works? When? Why? ect. What is item.setSize called for? How it works? When? Why? ect.

check the examples of ExtJS 3, there is an Ext.ux.Layout.CenterLayout under custom layouts there already, maybe a good point to start?

http://dev.sencha.com/deploy/dev/examples/layout-browser/layout-browser.html

Edit: Try this layout user extension, it centers an item in the horizontal and vertical center of it's container

Ext.ns('Ext.ux.layout');

Ext.ux.layout.CenterLayout = Ext.extend(Ext.layout.ContainerLayout, {
    monitorResize:true,
    type: 'ux.center',
    getLayoutTargetSize : function() {
        var target = this.container.getLayoutTarget();
        if (!target) {
            return {};
        }
        return target.getStyleSize();
    },
    onLayout : function(ct, target){
        Ext.ux.layout.CenterLayout.superclass.onLayout.call(this, ct, target);
        if(!ct.collapsed){
            this.setItemSize(this.activeItem || ct.items.itemAt(0), this.getLayoutTargetSize());
        }
    },
    setItemSize : function(item, size){
        var left = (size.width - item.getWidth()) / 2;
        var top  = (size.height - item.getHeight()) / 2;

        var pos = Ext.apply(item.getEl().getPositioning(), {
            position : 'absolute',
            left     : left,
            top      : top
        });
        item.getEl().setPositioning(pos);
    }
});
Ext.Container.LAYOUTS['ux.center'] = Ext.ux.layout.CenterLayout;

Ext.layout.ContainerLayout (the base class for layouts) has a doLayout method that triggers your container rendering.

In the case of FitLayout, its overriden and it calls a custom setItemSize function who calls the native setSize for the first container item (or the selected item if any), to fit the container size (maximize i guess).

Check also these custom layouts : http://layoutscroll.demo.revolunet.com/

Ext.create('Ext.container.Viewport', {
        layout: {
            type: 'hbox',
            pack: 'center',
            align: 'middle'
        },
        items: [
            {
                html: 'Hello World'
            }
        ]
    });