Upgrade to ExtJS 4.0.0 - Released 04/26/2011

[extjs.git] / examples / ux / layout / Center.js

diff --git a/examples/ux/CenterLayout.js b/examples/ux/layout/Center.js
similarity index 60%
rename from examples/ux/CenterLayout.js
rename to examples/ux/layout/Center.js
index 242d87f..7d3de46 100644 (file)
--- a/examples/ux/CenterLayout.js
+++ b/examples/ux/layout/Center.js
@@ -1,16 +1,6 @@
-/*!
- * Ext JS Library 3.3.1
- * Copyright(c) 2006-2010 Sencha Inc.
- * licensing@sencha.com
- * http://www.sencha.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
+ * @class Ext.ux.layout.Center
+ * @extends Ext.layout.container.Fit
  * <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
@@ -20,12 +10,12 @@ Ext.ns('Ext.ux.layout');
  * Example usage:</p>
  * <pre><code>
 // The content panel is centered in the container
-var p = new Ext.Panel({
+var p = Ext.create('Ext.Panel', {
     title: 'Center Layout',
     layout: 'ux.center',
     items: [{
         title: 'Centered Content',
-        width: '75%',
+        widthRatio: 0.75,
         html: 'Some content'
     }]
 });
@@ -33,7 +23,7 @@ var p = new Ext.Panel({
 // 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({
+var p = Ext.create('Ext.Panel', {
     layout: 'ux.center',
     border: false,
     items: [{
@@ -45,18 +35,22 @@ var p = new Ext.Panel({
 });
 </code></pre>
  */
-Ext.ux.layout.CenterLayout = Ext.extend(Ext.layout.FitLayout, {
+Ext.define('Ext.ux.layout.Center', {
+    extend: 'Ext.layout.container.Fit',
+    alias: 'layout.ux.center',
        // 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;
+    setItemSize : function(item, width, height){
+        this.owner.addCls('ux-layout-center');
+        item.addCls('ux-layout-center-item');
+        if(item && height > 0) {
+            if (width) {
+                width = item.width;
+                if (Ext.isNumber(item.widthRatio)) {
+                    width = Math.round(this.owner.el.getWidth() * item.widthRatio);
+                }
             }
-            item.setSize(size);
+            item.setSize(width, height);
         }
+
     }
 });
-
-Ext.Container.LAYOUTS['ux.center'] = Ext.ux.layout.CenterLayout;