- * @class Ext.layout.container.Border
- * @extends Ext.layout.container.Container
- * <p>This is a multi-pane, application-oriented UI layout style that supports multiple
- * nested panels, automatic bars between regions and built-in
- * {@link Ext.panel.Panel#collapsible expanding and collapsing} of regions.</p>
- * <p>This class is intended to be extended or created via the <code>layout:'border'</code>
- * {@link Ext.container.Container#layout} config, and should generally not need to be created directly
- * via the new keyword.</p>
- * {@img Ext.layout.container.Border/Ext.layout.container.Border.png Ext.layout.container.Border container layout}
- * <p>Example usage:</p>
- * <pre><code>
- Ext.create('Ext.panel.Panel', {
- width: 500,
- height: 400,
- title: 'Border Layout',
- layout: 'border',
- items: [{
- title: 'South Region is resizable',
- region: 'south', // position for region
- xtype: 'panel',
- height: 100,
- split: true, // enable resizing
- margins: '0 5 5 5'
- },{
- // xtype: 'panel' implied by default
- title: 'West Region is collapsible',
- region:'west',
- xtype: 'panel',
- margins: '5 0 0 5',
- width: 200,
- collapsible: true, // make collapsible
- id: 'west-region-container',
- layout: 'fit'
- },{
- title: 'Center Region',
- region: 'center', // center region is required, no width/height specified
- xtype: 'panel',
- layout: 'fit',
- margins: '5 5 0 0'
- }],
- renderTo: Ext.getBody()
- });
-</code></pre>
- * <p><b><u>Notes</u></b>:</p><div class="mdetail-params"><ul>
- * <li>Any Container using the Border layout <b>must</b> have a child item with <code>region:'center'</code>.
- * The child item in the center region will always be resized to fill the remaining space not used by
- * the other regions in the layout.</li>
- * <li>Any child items with a region of <code>west</code> or <code>east</code> may be configured with either
- * an initial <code>width</code>, or a {@link Ext.layout.container.Box#flex} value, or an initial percentage width <b>string</b> (Which is simply divided by 100 and used as a flex value). The 'center' region has a flex value of <code>1</code>.</li>
- * <li>Any child items with a region of <code>north</code> or <code>south</code> may be configured with either
- * an initial <code>height</code>, or a {@link Ext.layout.container.Box#flex} value, or an initial percentage height <b>string</b> (Which is simply divided by 100 and used as a flex value). The 'center' region has a flex value of <code>1</code>.</li>
- * <li>The regions of a BorderLayout are <b>fixed at render time</b> and thereafter, its child Components may not be removed or added</b>.To add/remove
- * Components within a BorderLayout, have them wrapped by an additional Container which is directly
- * managed by the BorderLayout. If the region is to be collapsible, the Container used directly
- * by the BorderLayout manager should be a Panel. In the following example a Container (an Ext.panel.Panel)
- * is added to the west region:<pre><code>
-wrc = {@link Ext#getCmp Ext.getCmp}('west-region-container');
-wrc.{@link Ext.container.Container#removeAll removeAll}();
-wrc.{@link Ext.container.Container#add add}({
- title: 'Added Panel',
- html: 'Some content'
-});
- * </code></pre>
- * </li>
- * <li><b>There is no BorderLayout.Region class in ExtJS 4.0+</b></li>
- * </ul></div>
+ * This is a multi-pane, application-oriented UI layout style that supports multiple nested panels, automatic bars
+ * between regions and built-in {@link Ext.panel.Panel#collapsible expanding and collapsing} of regions.
+ *
+ * This class is intended to be extended or created via the `layout:'border'` {@link Ext.container.Container#layout}
+ * config, and should generally not need to be created directly via the new keyword.
+ *
+ * @example
+ * Ext.create('Ext.panel.Panel', {
+ * width: 500,
+ * height: 400,
+ * title: 'Border Layout',
+ * layout: 'border',
+ * items: [{
+ * title: 'South Region is resizable',
+ * region: 'south', // position for region
+ * xtype: 'panel',
+ * height: 100,
+ * split: true, // enable resizing
+ * margins: '0 5 5 5'
+ * },{
+ * // xtype: 'panel' implied by default
+ * title: 'West Region is collapsible',
+ * region:'west',
+ * xtype: 'panel',
+ * margins: '5 0 0 5',
+ * width: 200,
+ * collapsible: true, // make collapsible
+ * id: 'west-region-container',
+ * layout: 'fit'
+ * },{
+ * title: 'Center Region',
+ * region: 'center', // center region is required, no width/height specified
+ * xtype: 'panel',
+ * layout: 'fit',
+ * margins: '5 5 0 0'
+ * }],
+ * renderTo: Ext.getBody()
+ * });
+ *
+ * # Notes
+ *
+ * - Any Container using the Border layout **must** have a child item with `region:'center'`.
+ * The child item in the center region will always be resized to fill the remaining space
+ * not used by the other regions in the layout.
+ *
+ * - Any child items with a region of `west` or `east` may be configured with either an initial
+ * `width`, or a {@link Ext.layout.container.Box#flex} value, or an initial percentage width
+ * **string** (Which is simply divided by 100 and used as a flex value).
+ * The 'center' region has a flex value of `1`.
+ *
+ * - Any child items with a region of `north` or `south` may be configured with either an initial
+ * `height`, or a {@link Ext.layout.container.Box#flex} value, or an initial percentage height
+ * **string** (Which is simply divided by 100 and used as a flex value).
+ * The 'center' region has a flex value of `1`.
+ *
+ * - The regions of a BorderLayout are **fixed at render time** and thereafter, its child
+ * Components may not be removed or added**. To add/remove Components within a BorderLayout,
+ * have them wrapped by an additional Container which is directly managed by the BorderLayout.
+ * If the region is to be collapsible, the Container used directly by the BorderLayout manager
+ * should be a Panel. In the following example a Container (an Ext.panel.Panel) is added to
+ * the west region:
+ *
+ * wrc = {@link Ext#getCmp Ext.getCmp}('west-region-container');
+ * wrc.{@link Ext.container.Container#removeAll removeAll}();
+ * wrc.{@link Ext.container.Container#add add}({
+ * title: 'Added Panel',
+ * html: 'Some content'
+ * });
+ *
+ * - **There is no BorderLayout.Region class in ExtJS 4.0+**