Upgrade to ExtJS 3.0.0 - Released 07/06/2009

[extjs.git] / examples / ux / CenterLayout.js

diff --git a/examples/ux/CenterLayout.js b/examples/ux/CenterLayout.js
new file mode 100644 (file)
index 0000000..0d71a1e
--- /dev/null
+++ b/examples/ux/CenterLayout.js
@@ -0,0 +1,62 @@
+/*!
+ * Ext JS Library 3.0.0
+ * Copyright(c) 2006-2009 Ext JS, LLC
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
+// We are adding these custom layouts to a namespace that does not
+// exist by default in Ext, so we have to add the namespace first:
+Ext.ns('Ext.ux.layout');
+
+/**
+ * @class Ext.ux.layout.CenterLayout
+ * @extends Ext.layout.FitLayout
+ * <p>This is a very simple layout style used to center contents within a container.  This layout works within
+ * nested containers and can also be used as expected as a Viewport layout to center the page layout.</p>
+ * <p>As a subclass of FitLayout, CenterLayout expects to have a single child panel of the container that uses
+ * the layout.  The layout does not require any config options, although the child panel contained within the
+ * layout must provide a fixed or percentage width.  The child panel's height will fit to the container by
+ * default, but you can specify <tt>autoHeight:true</tt> to allow it to autosize based on its content height.
+ * Example usage:</p>
+ * <pre><code>
+// The content panel is centered in the container
+var p = new Ext.Panel({
+    title: 'Center Layout',
+    layout: 'ux.center',
+    items: [{
+        title: 'Centered Content',
+        width: '75%',
+        html: 'Some content'
+    }]
+});
+
+// If you leave the title blank and specify no border
+// you'll create a non-visual, structural panel just
+// for centering the contents in the main container.
+var p = new Ext.Panel({
+    layout: 'ux.center',
+    border: false,
+    items: [{
+        title: 'Centered Content',
+        width: 300,
+        autoHeight: true,
+        html: 'Some content'
+    }]
+});
+</code></pre>
+ */
+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 && size.height > 0){
+            if(item.width){
+                size.width = item.width;
+            }
+            item.setSize(size);
+        }
+    }
+});
+
+Ext.Container.LAYOUTS['ux.center'] = Ext.ux.layout.CenterLayout;