76 lines
2.6 KiB
JavaScript
76 lines
2.6 KiB
JavaScript
/*
|
|
This file is part of Ext JS 3.4
|
|
|
|
Copyright (c) 2011-2013 Sencha Inc
|
|
|
|
Contact: http://www.sencha.com/contact
|
|
|
|
GNU General Public License Usage
|
|
This file may be used under the terms of the GNU General Public License version 3.0 as
|
|
published by the Free Software Foundation and appearing in the file LICENSE included in the
|
|
packaging of this file.
|
|
|
|
Please review the following information to ensure the GNU General Public License version 3.0
|
|
requirements will be met: http://www.gnu.org/copyleft/gpl.html.
|
|
|
|
If you are unsure which license is appropriate for your use, please contact the sales department
|
|
at http://www.sencha.com/contact.
|
|
|
|
Build date: 2013-04-03 15:07:25
|
|
*/
|
|
// 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;
|