Upgrade to ExtJS 4.0.2 - Released 06/09/2011
[extjs.git] / docs / output / Ext.layout.container.Border.js
1 Ext.data.JsonP.Ext_layout_container_Border({
2   "allMixins": [
3
4   ],
5   "deprecated": null,
6   "docauthor": null,
7   "members": {
8     "cfg": [
9       {
10         "type": "Boolean",
11         "deprecated": null,
12         "alias": null,
13         "protected": false,
14         "tagname": "cfg",
15         "href": "AbstractContainer.html#Ext-layout-container-AbstractContainer-cfg-bindToOwnerCtComponent",
16         "static": false,
17         "filename": "/mnt/ebs/nightly/git/SDK/platform/src/layout/container/AbstractContainer.js",
18         "private": false,
19         "name": "bindToOwnerCtComponent",
20         "owner": "Ext.layout.container.AbstractContainer",
21         "doc": "<p>Flag to notify the ownerCt Component on afterLayout of a change</p>\n",
22         "linenr": 17,
23         "html_filename": "AbstractContainer.html"
24       },
25       {
26         "type": "Boolean",
27         "deprecated": null,
28         "alias": null,
29         "protected": false,
30         "tagname": "cfg",
31         "href": "AbstractContainer.html#Ext-layout-container-AbstractContainer-cfg-bindToOwnerCtContainer",
32         "static": false,
33         "filename": "/mnt/ebs/nightly/git/SDK/platform/src/layout/container/AbstractContainer.js",
34         "private": false,
35         "name": "bindToOwnerCtContainer",
36         "owner": "Ext.layout.container.AbstractContainer",
37         "doc": "<p>Flag to notify the ownerCt Container on afterLayout of a change</p>\n",
38         "linenr": 23,
39         "html_filename": "AbstractContainer.html"
40       },
41       {
42         "type": "String",
43         "deprecated": null,
44         "alias": null,
45         "protected": false,
46         "tagname": "cfg",
47         "href": "AbstractContainer.html#Ext-layout-container-AbstractContainer-cfg-itemCls",
48         "shortDoc": "An optional extra CSS class that will be added to the container. ...",
49         "static": false,
50         "filename": "/mnt/ebs/nightly/git/SDK/platform/src/layout/container/AbstractContainer.js",
51         "private": false,
52         "name": "itemCls",
53         "owner": "Ext.layout.container.AbstractContainer",
54         "doc": "<p>An optional extra CSS class that will be added to the container. This can be useful for adding\ncustomized styles to the container or any of its children using standard CSS rules. See\n<a href=\"#/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a>.ctCls also.</p>\n\n\n<p></p></p>\n",
55         "linenr": 29,
56         "html_filename": "AbstractContainer.html"
57       }
58     ],
59     "method": [
60       {
61         "deprecated": null,
62         "alias": null,
63         "protected": false,
64         "tagname": "method",
65         "href": "AbstractContainer.html#Ext-layout-container-AbstractContainer-method-getLayoutItems",
66         "shortDoc": "Returns an array of child components either for a render phase (Performed in the beforeLayout method of the layout's\n...",
67         "static": false,
68         "filename": "/mnt/ebs/nightly/git/SDK/platform/src/layout/container/AbstractContainer.js",
69         "private": false,
70         "params": [
71
72         ],
73         "name": "getLayoutItems",
74         "owner": "Ext.layout.container.AbstractContainer",
75         "doc": "<p>Returns an array of child components either for a render phase (Performed in the beforeLayout method of the layout's\nbase class), or the layout phase (onLayout).</p>\n\n",
76         "linenr": 49,
77         "return": {
78           "type": "Array",
79           "doc": "<p>of child components</p>\n"
80         },
81         "html_filename": "AbstractContainer.html"
82       },
83       {
84         "deprecated": null,
85         "alias": null,
86         "protected": false,
87         "tagname": "method",
88         "href": "Border.html#Ext-layout-container-Border-method-getPlaceholder",
89         "shortDoc": "Return the placeholder Component to which the passed child Panel of the layout will collapse. ...",
90         "static": false,
91         "filename": "/mnt/ebs/nightly/git/SDK/extjs/src/layout/container/Border.js",
92         "private": false,
93         "params": [
94           {
95             "type": "Panel",
96             "optional": false,
97             "doc": "<p>The child Panel of the layout for which to return the <a href=\"#/api/Ext.panel.Panel-cfg-placeholder\" rel=\"Ext.panel.Panel-cfg-placeholder\" class=\"docClass\">placeholder</a>.</p>\n",
98             "name": "panel"
99           }
100         ],
101         "name": "getPlaceholder",
102         "owner": "Ext.layout.container.Border",
103         "doc": "<p>Return the <a href=\"#/api/Ext.panel.Panel-cfg-placeholder\" rel=\"Ext.panel.Panel-cfg-placeholder\" class=\"docClass\">placeholder</a> Component to which the passed child Panel of the layout will collapse.\nBy default, this will be a <a href=\"#/api/Ext.panel.Header\" rel=\"Ext.panel.Header\" class=\"docClass\">Header</a> component (Docked to the appropriate border). See <a href=\"#/api/Ext.panel.Panel-cfg-placeholder\" rel=\"Ext.panel.Panel-cfg-placeholder\" class=\"docClass\">placeholder</a>.\nconfig to customize this.</p>\n\n\n<p><b>Note that this will be a fully instantiated Component, but will only be <i>rendered</i> when the Panel is first collapsed.</b></p>\n\n",
104         "linenr": 505,
105         "return": {
106           "type": "Component",
107           "doc": "<p>The Panel's <a href=\"#/api/Ext.panel.Panel-cfg-placeholder\" rel=\"Ext.panel.Panel-cfg-placeholder\" class=\"docClass\">placeholder</a> unless the <a href=\"#/api/Ext.panel.Panel-cfg-collapseMode\" rel=\"Ext.panel.Panel-cfg-collapseMode\" class=\"docClass\">collapseMode</a> is\n<code>'header'</code>, in which case <i>undefined</i> is returned.</p>\n"
108         },
109         "html_filename": "Border.html"
110       },
111       {
112         "deprecated": null,
113         "alias": null,
114         "protected": false,
115         "tagname": "method",
116         "href": "AbstractContainer.html#Ext-layout-container-AbstractContainer-method-getRenderTarget",
117         "shortDoc": "Returns the element into which rendering must take place. ...",
118         "static": false,
119         "filename": "/mnt/ebs/nightly/git/SDK/platform/src/layout/container/AbstractContainer.js",
120         "private": false,
121         "params": [
122
123         ],
124         "name": "getRenderTarget",
125         "owner": "Ext.layout.container.AbstractContainer",
126         "doc": "<p>Returns the element into which rendering must take place. Defaults to the owner Container's Ext.AbstractComponent.targetEl.</p>\n\n\n<p>May be overridden in layout managers which implement an inner element.</p>\n",
127         "linenr": 68,
128         "return": {
129           "type": "Ext.core.Element",
130           "doc": "\n"
131         },
132         "html_filename": "AbstractContainer.html"
133       },
134       {
135         "deprecated": null,
136         "alias": null,
137         "protected": true,
138         "tagname": "method",
139         "href": "Container.html#Ext-layout-container-Container-method-getRenderedItems",
140         "shortDoc": "Returns all items that are rendered ...",
141         "static": false,
142         "filename": "/mnt/ebs/nightly/git/SDK/extjs/src/layout/container/Container.js",
143         "private": false,
144         "params": [
145
146         ],
147         "name": "getRenderedItems",
148         "owner": "Ext.layout.container.Container",
149         "doc": "<p>Returns all items that are rendered</p>\n",
150         "linenr": 53,
151         "return": {
152           "type": "Array",
153           "doc": "<p>All matching items</p>\n"
154         },
155         "html_filename": "Container.html"
156       },
157       {
158         "deprecated": null,
159         "alias": null,
160         "protected": false,
161         "tagname": "method",
162         "href": "AbstractContainer.html#Ext-layout-container-AbstractContainer-method-getTarget",
163         "shortDoc": "Returns the owner component's resize element. ...",
164         "static": false,
165         "filename": "/mnt/ebs/nightly/git/SDK/platform/src/layout/container/AbstractContainer.js",
166         "private": false,
167         "params": [
168
169         ],
170         "name": "getTarget",
171         "owner": "Ext.layout.container.AbstractContainer",
172         "doc": "<p>Returns the owner component's resize element.</p>\n",
173         "linenr": 61,
174         "return": {
175           "type": "Ext.core.Element",
176           "doc": "\n"
177         },
178         "html_filename": "AbstractContainer.html"
179       },
180       {
181         "deprecated": null,
182         "alias": null,
183         "protected": true,
184         "tagname": "method",
185         "href": "Container.html#Ext-layout-container-Container-method-getVisibleItems",
186         "shortDoc": "Returns all items that are both rendered and visible ...",
187         "static": false,
188         "filename": "/mnt/ebs/nightly/git/SDK/extjs/src/layout/container/Container.js",
189         "private": false,
190         "params": [
191
192         ],
193         "name": "getVisibleItems",
194         "owner": "Ext.layout.container.Container",
195         "doc": "<p>Returns all items that are both rendered and visible</p>\n",
196         "linenr": 76,
197         "return": {
198           "type": "Array",
199           "doc": "<p>All matching items</p>\n"
200         },
201         "html_filename": "Container.html"
202       }
203     ],
204     "property": [
205
206     ],
207     "cssVar": [
208
209     ],
210     "cssMixin": [
211
212     ],
213     "event": [
214
215     ]
216   },
217   "singleton": false,
218   "alias": null,
219   "superclasses": [
220     "Ext.layout.Layout",
221     "Ext.layout.container.AbstractContainer",
222     "Ext.layout.container.Container"
223   ],
224   "protected": false,
225   "tagname": "class",
226   "mixins": [
227
228   ],
229   "href": "Border.html#Ext-layout-container-Border",
230   "subclasses": [
231
232   ],
233   "static": false,
234   "author": null,
235   "component": false,
236   "filename": "/mnt/ebs/nightly/git/SDK/extjs/src/layout/container/Border.js",
237   "private": false,
238   "alternateClassNames": [
239     "Ext.layout.BorderLayout"
240   ],
241   "name": "Ext.layout.container.Border",
242   "doc": "<p>This is a multi-pane, application-oriented UI layout style that supports multiple\nnested panels, automatic bars between regions and built-in\n<a href=\"#/api/Ext.panel.Panel-cfg-collapsible\" rel=\"Ext.panel.Panel-cfg-collapsible\" class=\"docClass\">expanding and collapsing</a> of regions.</p>\n\n\n<p>This class is intended to be extended or created via the <code>layout:'border'</code>\n<a href=\"#/api/Ext.container.Container-cfg-layout\" rel=\"Ext.container.Container-cfg-layout\" class=\"docClass\">Ext.container.Container.layout</a> config, and should generally not need to be created directly\nvia the new keyword.</p>\n\n\n<p><p><img src=\"doc-resources/Ext.layout.container.Border/Ext.layout.container.Border.png\" alt=\"Ext.layout.container.Border container layout\"></p></p>\n\n<p>Example usage:</p>\n\n\n<pre><code>     Ext.create('Ext.panel.Panel', {\n        width: 500,\n        height: 400,\n        title: 'Border Layout',\n        layout: 'border',\n        items: [{\n            title: 'South Region is resizable',\n            region: 'south',     // position for region\n            xtype: 'panel',\n            height: 100,\n            split: true,         // enable resizing\n            margins: '0 5 5 5'\n        },{\n            // xtype: 'panel' implied by default\n            title: 'West Region is collapsible',\n            region:'west',\n            xtype: 'panel',\n            margins: '5 0 0 5',\n            width: 200,\n            collapsible: true,   // make collapsible\n            id: 'west-region-container',\n            layout: 'fit'\n        },{\n            title: 'Center Region',\n            region: 'center',     // center region is required, no width/height specified\n            xtype: 'panel',\n            layout: 'fit',\n            margins: '5 5 0 0'\n        }],\n        renderTo: Ext.getBody()\n    });\n</code></pre>\n\n\n<p><b><u>Notes</u></b>:</p>\n\n\n<div class=\"mdetail-params\"><ul>\n<li>Any Container using the Border layout <b>must</b> have a child item with <code>region:'center'</code>.\nThe child item in the center region will always be resized to fill the remaining space not used by\nthe other regions in the layout.</li>\n<li>Any child items with a region of <code>west</code> or <code>east</code> may be configured with either\nan initial <code>width</code>, or a <a href=\"#/api/Ext.layout.container.Box-cfg-flex\" rel=\"Ext.layout.container.Box-cfg-flex\" class=\"docClass\">Ext.layout.container.Box.flex</a> 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>\n<li>Any child items with a region of <code>north</code> or <code>south</code> may be configured with either\nan initial <code>height</code>, or a <a href=\"#/api/Ext.layout.container.Box-cfg-flex\" rel=\"Ext.layout.container.Box-cfg-flex\" class=\"docClass\">Ext.layout.container.Box.flex</a> 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>\n<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\nComponents within a BorderLayout, have them wrapped by an additional Container which is directly\nmanaged by the BorderLayout.  If the region is to be collapsible, the Container used directly\nby the BorderLayout manager should be a Panel.  In the following example a Container (an Ext.panel.Panel)\nis added to the west region:\n<pre><code>wrc = <a href=\"#/api/Ext-method-getCmp\" rel=\"Ext-method-getCmp\" class=\"docClass\">Ext.getCmp</a>('west-region-container');\nwrc.<a href=\"#/api/Ext.container.Container-method-removeAll\" rel=\"Ext.container.Container-method-removeAll\" class=\"docClass\">removeAll</a>();\nwrc.<a href=\"#/api/Ext.container.Container-event-add\" rel=\"Ext.container.Container-event-add\" class=\"docClass\">add</a>({\n    title: 'Added Panel',\n    html: 'Some content'\n});\n</code></pre>\n</li>\n<li><b>There is no BorderLayout.Region class in ExtJS 4.0+</b></li>\n</ul></div>\n\n",
243   "mixedInto": [
244
245   ],
246   "linenr": 1,
247   "xtypes": [
248
249   ],
250   "html_filename": "Border.html",
251   "extends": "Ext.layout.container.Container"
252 });