X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/0494b8d9b9bb03ab6c22b34dae81261e3cd7e3e6:/examples/ux/CenterLayout.js..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/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 242d87f0..7d3de466 100644 --- 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 *
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.
*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:
*
// 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({
});
*/
-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;