javascript - How to write custom layout in ExtJs 4 or 3 -

I want to write my own layout .. (like vbox , border < / Code> and so much more) ... what I want to do is to make the layout that it will position the middle content (verticall - medium, horisontal-middle).

There is something that can show me how this control looks in extJ or can provide some links that can be useful?

---

me from this example

  Ext.ux.layout.CenterLayout = Ext.extend (Ext.layout .FitLayout, {// Private set item size: function (item, size) {this.container.addClass ('ux-layout-centre'); item.addClass ('ux-layout-center-item'); if ( Item & amp; amp; size.height & gt; 0) {if (item.width) {size.width = item.width;} Item.setSize (size);}}}); Ext.Container.LAYOUTS ['ux.center'] = Ext.ux.layout.CenterLayout;   
 But this gives me more questions than the answer .. What is  setItemSize  how does it work? When? Why? Ect. What is called for  item.setSize ? how it works? When? Why? Ect.  
  
 
 
 Check instances of ExtJS 3, there is a  Ext.ux.Layout. Center layout under custom layout  Already, maybe a good thing to start?  
  
 
 Edit: Try this layout user extension, it is an item horizontal and vertical center of its container  
  Ext.ns ('Ext.ux.layout'); Ext.ux.layout.CenterLayout = Ext.extend (Ext.layout.ContainerLayout, {Monitor Resize: True, type: 'ux.center', getLayoutTargetSize: function () {var target = this.container.getLayoutTarget (); If (! Target) {return {};} return target.getStyleSize ();}, onLayout: function (whistle, goal) {Ext.ux.layout.CenterLayout.superclass.onLayout.call (this, CT, target); If (! Ct.collapsed) {this.setItemSize (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 (), {status: 'full', left: Left, top: top}); item.getEl (). SetPositioning (pos);}}}; Ext.Container.LAYOUTS ['ux. Center '] = Ext.ux.layout.CenterLayout;