--- /dev/null
+<html>\r
+<head>\r
+ <title>The source code</title>\r
+ <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
+ <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
+</head>\r
+<body onload="prettyPrint();">\r
+ <pre class="prettyprint lang-js">// 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');
+
+<div id="cls-Ext.ux.layout.CenterLayout"></div>/**
+ * @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;
+</pre> \r
+</body>\r
+</html>
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff