1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
7 <meta http-equiv="content-type" content="text/html; charset=undefined" />
8 <meta name="generator" content="JsDoc Toolkit" />
11 <title>JsDoc Reference - Roo.BorderLayout</title>
14 <link rel="stylesheet" type="text/css" href="../../css/roojs.css" />
15 <link rel="stylesheet" type="text/css" href="../default.css" />
18 <script type="text/javascript" src="../page.js">
25 <body onload="RooDocsPage.onload();">
28 <div class="body-wrap">
30 <!-- ============================== links to methods. ================================= -->
32 <div class="top-tools">
34 <a class="inner-link" href="#Roo.BorderLayout-props"><img src="resources/s.gif" class="item-icon icon-prop">Properties</a>
35 <a class="inner-link" href="#Roo.BorderLayout-methods"><img src="resources/s.gif" class="item-icon icon-method">Methods</a>
36 <a class="inner-link" href="#Roo.BorderLayout-events"><img src="resources/s.gif" class="item-icon icon-event">Events</a>
37 <a class="inner-link" href="#Roo.BorderLayout-configs"><img src="resources/s.gif" class="item-icon icon-config">Config Options</a>
38 <a class="bookmark" href="NEED_TO_CREATE_DIRECT_LINK_HREF"><img src="resources/s.gif" class="item-icon icon-fav">Direct Link</a>
43 <!-- ============================== inheritance Block. ================================= -->
45 <div class="inheritance res-block">
46 <pre class="res-block-inner"><a href="./Roo.LayoutManager.html#constructor" roo:cls="Roo.LayoutManager.html#constructor">Roo.LayoutManager</a>
47 <img src="../../images/default/s.gif" height="1" width="20"/><img class="elbow" src="../../images/default/tree/elbow-end.gif"/>Roo.BorderLayout
52 <!-- ============================== class title / details ============================ -->
55 <h1 class="classTitle">
57 Class Roo.BorderLayout
60 <table cellspacing="0" class="class-summary-table">
62 <tr><td class="label">Package:</td><td class="hd-info">Roo</td></tr>
64 <tr><td class="label">Defined In:</td><td class="hd-info">
66 <a href="./src/Roo_BorderLayout.js.html">Roo/BorderLayout.js</a>.
69 <tr><td class="label">Class:</td><td class="hd-info">BorderLayout</td></tr>
74 <tr><td class="label">Extends:</td><td class="hd-info">
75 <a href="./Roo.LayoutManager.html#constructor" roo:cls="Roo.LayoutManager.html#constructor">Roo.LayoutManager</a>
83 <!-- ============================== class summary ========================== -->
84 <div class="description">
85 This class represents a common layout manager used in desktop applications. For screenshots and more details,<br/>please see: <br><br><br/><a href="http://www.jackslocum.com/yui/2006/10/19/cross-browser-web-20-layouts-with-yahoo-ui/">Cross Browser Layouts - Part 1</a><br><br/><a href="http://www.jackslocum.com/yui/2006/10/28/cross-browser-web-20-layouts-part-2-ajax-feed-viewer-20/">Cross Browser Layouts - Part 2</a><br><br><br/>Example:<br/> <pre><code><br/> var layout = new Roo.BorderLayout(document.body, {<br/> north: {<br/> initialSize: 25,<br/> titlebar: false<br/> },<br/> west: {<br/> split:true,<br/> initialSize: 200,<br/> minSize: 175,<br/> maxSize: 400,<br/> titlebar: true,<br/> collapsible: true<br/> },<br/> east: {<br/> split:true,<br/> initialSize: 202,<br/> minSize: 175,<br/> maxSize: 400,<br/> titlebar: true,<br/> collapsible: true<br/> },<br/> south: {<br/> split:true,<br/> initialSize: 100,<br/> minSize: 100,<br/> maxSize: 200,<br/> titlebar: true,<br/> collapsible: true<br/> },<br/> center: {<br/> titlebar: true,<br/> autoScroll:true,<br/> resizeTabs: true,<br/> minTabWidth: 50,<br/> preferredTabWidth: 150<br/> }<br/>});<br/><br/>// shorthand<br/>var CP = Roo.ContentPanel;<br/><br/>layout.beginUpdate();<br/>layout.add("north", new CP("north", "North"));<br/>layout.add("south", new CP("south", {title: "South", closable: true}));<br/>layout.add("west", new CP("west", {title: "West"}));<br/>layout.add("east", new CP("autoTabs", {title: "Auto Tabs", closable: true}));<br/>layout.add("center", new CP("center1", {title: "Close Me", closable: true}));<br/>layout.add("center", new CP("center2", {title: "Center Panel", closable: false}));<br/>layout.getRegion("center").showPanel("center1");<br/>layout.endUpdate();<br/></code></pre><br/><br/><b>The container the layout is rendered into can be either the body element or any other element.<br/>If it is not the body element, the container needs to either be an absolute positioned element,<br/>or you will need to add "position:relative" to the css of the container. You will also need to specify<br/>the container size if it is not the body element.</b>
89 <!-- ============================== Class comment block... ========================== -->
91 <div class="comments">
92 <b>Class Comments / Notes</B> =>
93 <u onclick="parent.CommentDialog.showCommentId = 'Roo.BorderLayout';">[Add Your comment/notes about this class]</u>
95 <iframe frameborder="0" id="comments-Roo" style="border: none;width:100%;"
96 src="/blog.php/GtkDjsComments/Roo.BorderLayout.html"></iframe>
101 <!-- ============================== config options ========================== -->
106 <div class="hr"></div>
107 <a id="Roo.BorderLayout-configs"></a>
111 <table cellspacing="0" class="member-table">
112 <caption class="Empty">Config Options - Has None</caption>
126 <!-- ============================== public properties ==================== -->
130 <a id="Roo.BorderLayout-props"></a>
136 <table cellspacing="0" class="member-table">
137 <caption class="Empty">Public Properties - Has None</caption>
143 <!-- ============================== methods summary / details ======================== -->
146 <a id="Roo.BorderLayout-methods"></a>
147 <!-- constructor?? -->
154 <!-- then dynamics first -->
161 <table cellspacing="0" class="member-table">
162 <caption>Public Methods</caption>
164 <th class="sig-header" colspan="2">Method</th>
165 <th class="msource-header">Defined By</th>
175 <tr class="method-row config-row-alt0 expandable notInherited">
176 <td class="micon"><a class="exi" href="#expand"> </a></td>
180 <a id="Roo-method-BorderLayout" name=".BorderLayout"></a>
181 <div class="fixedFont">
182 <span class="attributes">new <B>Roo.</B></span><b class="itemname">BorderLayout</b>
184 (<a href="./String.html#constructor" roo:cls="String.html#constructor">String</a>/HTMLElement/Element <B><i>container</i></B>, <a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Object">Object</a> <B><i>config</i></B>)
192 <div class="short">Create a new Roo.BorderLayout</div>
199 Create a new Roo.BorderLayout
202 <dl class="detailList">
203 <dt class="heading">Parameters:</dt>
206 <span class="fixedFont"><a href="./String.html#constructor" roo:cls="String.html#constructor">String</a>/HTMLElement/Element</span> <b>container</b>
209 <dd>The container this layout is bound to</dd>
212 <span class="fixedFont"><a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Object">Object</a></span> <b>config</b>
215 <dd>Configuration options</dd>
239 <tr class="method-row config-row-alt1 expandable notInherited">
240 <td class="micon"><a class="exi" href="#expand"> </a></td>
244 <a id="Roo.BorderLayout-method-create" name=".create"></a>
245 <div class="fixedFont">
246 <span class="attributes">Roo.BorderLayout.</span><b class="itemname">create</b>
248 (<B><i>config</i></B>, <B><i>targetEl</i></B>)
255 <div class="short">Shortcut for creating a new BorderLayout object and adding one or more ContentPanels to it in a single step, handling<br/>the beginUpdate and endUpdate calls internally.</div>
261 Shortcut for creating a new BorderLayout object and adding one or more ContentPanels to it in a single step, handling<br/>the beginUpdate and endUpdate calls internally. The key to this method is the <b>panels</b> property that can be<br/>provided with each region config, which allows you to add ContentPanel configs in addition to the region configs<br/>during creation. The following code is equivalent to the constructor-based example at the beginning of this class:<br/><pre><code><br/>// shorthand<br/>var CP = Roo.ContentPanel;<br/><br/>var layout = Roo.BorderLayout.create({<br/> north: {<br/> initialSize: 25,<br/> titlebar: false,<br/> panels: [new CP("north", "North")]<br/> },<br/> west: {<br/> split:true,<br/> initialSize: 200,<br/> minSize: 175,<br/> maxSize: 400,<br/> titlebar: true,<br/> collapsible: true,<br/> panels: [new CP("west", {title: "West"})]<br/> },<br/> east: {<br/> split:true,<br/> initialSize: 202,<br/> minSize: 175,<br/> maxSize: 400,<br/> titlebar: true,<br/> collapsible: true,<br/> panels: [new CP("autoTabs", {title: "Auto Tabs", closable: true})]<br/> },<br/> south: {<br/> split:true,<br/> initialSize: 100,<br/> minSize: 100,<br/> maxSize: 200,<br/> titlebar: true,<br/> collapsible: true,<br/> panels: [new CP("south", {title: "South", closable: true})]<br/> },<br/> center: {<br/> titlebar: true,<br/> autoScroll:true,<br/> resizeTabs: true,<br/> minTabWidth: 50,<br/> preferredTabWidth: 150,<br/> panels: [<br/> new CP("center1", {title: "Close Me", closable: true}),<br/> new CP("center2", {title: "Center Panel", closable: false})<br/> ]<br/> }<br/>}, document.body);<br/><br/>layout.getRegion("center").showPanel("center1");<br/></code></pre>
268 <dl class="detailList">
269 <dt class="heading">Parameters:</dt>
307 <tr class="method-row config-row-alt0 expandable notInherited">
308 <td class="micon"><a class="exi" href="#expand"> </a></td>
312 <a id="Roo.BorderLayout-method-add" name=".add"></a>
313 <div class="fixedFont">
314 <span class="attributes"></span><b class="itemname">add</b>
316 (<a href="./String.html#constructor" roo:cls="String.html#constructor">String</a> <B><i>target</i></B>, <a href="./Roo.ContentPanel.html#constructor" roo:cls="Roo.ContentPanel.html#constructor">Roo.ContentPanel</a> <B><i>panel</i></B>)
322 <a href="./Roo.ContentPanel.html#constructor" roo:cls="Roo.ContentPanel.html#constructor">Roo.ContentPanel</a>
331 <div class="short">Adds a ContentPanel (or subclass) to this layout.</div>
337 Adds a ContentPanel (or subclass) to this layout.
344 <dl class="detailList">
345 <dt class="heading">Parameters:</dt>
348 <span class="fixedFont"><a href="./String.html#constructor" roo:cls="String.html#constructor">String</a></span> <b>target</b>
351 <dd>The target region key (north, south, east, west or center).</dd>
354 <span class="fixedFont"><a href="./Roo.ContentPanel.html#constructor" roo:cls="Roo.ContentPanel.html#constructor">Roo.ContentPanel</a></span> <b>panel</b>
357 <dd>The panel to add</dd>
365 <dl class="detailList">
366 <dt class="heading">Returns:</dt>
368 <dd><span class="fixedFont"><a href="./Roo.ContentPanel.html#constructor" roo:cls="Roo.ContentPanel.html#constructor">Roo.ContentPanel</a></span> The added panel</dd>
390 <tr class="method-row config-row-alt1 expandable notInherited">
391 <td class="micon"><a class="exi" href="#expand"> </a></td>
395 <a id="Roo.BorderLayout-method-addRegion" name=".addRegion"></a>
396 <div class="fixedFont">
397 <span class="attributes"></span><b class="itemname">addRegion</b>
399 (<a href="./String.html#constructor" roo:cls="String.html#constructor">String</a> <B><i>target</i></B>, <a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Object">Object</a> <B><i>config</i></B>)
414 <div class="short">Creates and adds a new region if it doesn't already exist.</div>
420 Creates and adds a new region if it doesn't already exist.
427 <dl class="detailList">
428 <dt class="heading">Parameters:</dt>
431 <span class="fixedFont"><a href="./String.html#constructor" roo:cls="String.html#constructor">String</a></span> <b>target</b>
434 <dd>The target region key (north, south, east, west or center).</dd>
437 <span class="fixedFont"><a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Object">Object</a></span> <b>config</b>
440 <dd>The regions config object</dd>
448 <dl class="detailList">
449 <dt class="heading">Returns:</dt>
451 <dd><span class="fixedFont">BorderLayoutRegion</span> The new region</dd>
473 <tr class="method-row config-row-alt0 expandable notInherited">
474 <td class="micon"><a class="exi" href="#expand"> </a></td>
478 <a id="Roo.BorderLayout-method-addxtype" name=".addxtype"></a>
479 <div class="fixedFont">
480 <span class="attributes"></span><b class="itemname">addxtype</b>
482 (<a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Object">Object</a> <B><i>cfg</i></B>)
489 <div class="short">Adds a xtype elements to the layout.</div>
495 Adds a xtype elements to the layout.<br/><pre><code><br/><br/>layout.addxtype({<br/> xtype : 'ContentPanel',<br/> region: 'west',<br/> items: [ .... ]<br/> }<br/>);<br/><br/>layout.addxtype({<br/> xtype : 'NestedLayoutPanel',<br/> region: 'west',<br/> layout: {<br/> center: { },<br/> west: { } <br/> },<br/> items : [ ... list of content panels or nested layout panels.. ]<br/> }<br/>);<br/></code></pre>
502 <dl class="detailList">
503 <dt class="heading">Parameters:</dt>
506 <span class="fixedFont"><a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Object">Object</a></span> <b>cfg</b>
509 <dd>Xtype definition of item to add.</dd>
535 <tr class="method-row config-row-alt1 expandable notInherited">
536 <td class="micon"><a class="exi" href="#expand"> </a></td>
540 <a id="Roo.BorderLayout-method-batchAdd" name=".batchAdd"></a>
541 <div class="fixedFont">
542 <span class="attributes"></span><b class="itemname">batchAdd</b>
544 (<a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Object">Object</a> <B><i>regions</i></B>)
551 <div class="short">Adds a batch of multiple ContentPanels dynamically by passing a special regions config object.</div>
557 Adds a batch of multiple ContentPanels dynamically by passing a special regions config object. This config<br/>object should contain properties for each region to add ContentPanels to, and each property's value should be<br/>a valid ContentPanel config object. Example:<br/><pre><code><br/>// Create the main layout<br/>var layout = new Roo.BorderLayout('main-ct', {<br/> west: {<br/> split:true,<br/> minSize: 175,<br/> titlebar: true<br/> },<br/> center: {<br/> title:'Components'<br/> }<br/>}, 'main-ct');<br/><br/>// Create and add multiple ContentPanels at once via configs<br/>layout.batchAdd({<br/> west: {<br/> id: 'source-files',<br/> autoCreate:true,<br/> title:'Ext Source Files',<br/> autoScroll:true,<br/> fitToFrame:true<br/> },<br/> center : {<br/> el: cview,<br/> autoScroll:true,<br/> fitToFrame:true,<br/> toolbar: tb,<br/> resizeEl:'cbody'<br/> }<br/>});<br/></code></pre>
564 <dl class="detailList">
565 <dt class="heading">Parameters:</dt>
568 <span class="fixedFont"><a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Object">Object</a></span> <b>regions</b>
571 <dd>An object containing ContentPanel configs by region name</dd>
597 <tr class="method-row config-row-alt0 expandable notInherited">
598 <td class="micon"><a class="exi" href="#expand"> </a></td>
602 <a id="Roo.BorderLayout-method-findPanel" name=".findPanel"></a>
603 <div class="fixedFont">
604 <span class="attributes"></span><b class="itemname">findPanel</b>
606 (<a href="./String.html#constructor" roo:cls="String.html#constructor">String</a> <B><i>panelId</i></B>)
612 <a href="./Roo.ContentPanel.html#constructor" roo:cls="Roo.ContentPanel.html#constructor">Roo.ContentPanel</a>
621 <div class="short">Searches all regions for a panel with the specified id</div>
627 Searches all regions for a panel with the specified id
634 <dl class="detailList">
635 <dt class="heading">Parameters:</dt>
638 <span class="fixedFont"><a href="./String.html#constructor" roo:cls="String.html#constructor">String</a></span> <b>panelId</b>
649 <dl class="detailList">
650 <dt class="heading">Returns:</dt>
652 <dd><span class="fixedFont"><a href="./Roo.ContentPanel.html#constructor" roo:cls="Roo.ContentPanel.html#constructor">Roo.ContentPanel</a></span> The panel or null if it wasn't found</dd>
674 <tr class="method-row config-row-alt1 expandable notInherited">
675 <td class="micon"><a class="exi" href="#expand"> </a></td>
679 <a id="Roo.BorderLayout-method-layout" name=".layout"></a>
680 <div class="fixedFont">
681 <span class="attributes"></span><b class="itemname">layout</b>
690 <div class="short">Performs a layout update.</div>
696 Performs a layout update.
725 <tr class="method-row config-row-alt0 expandable notInherited">
726 <td class="micon"><a class="exi" href="#expand"> </a></td>
730 <a id="Roo.BorderLayout-method-remove" name=".remove"></a>
731 <div class="fixedFont">
732 <span class="attributes"></span><b class="itemname">remove</b>
734 (<a href="./String.html#constructor" roo:cls="String.html#constructor">String</a> <B><i>target</i></B>, <a href="./Number.html#constructor" roo:cls="Number.html#constructor">Number</a>/String/Roo.ContentPanel <B><i>panel</i></B>)
740 <a href="./Roo.ContentPanel.html#constructor" roo:cls="Roo.ContentPanel.html#constructor">Roo.ContentPanel</a>
749 <div class="short">Remove a ContentPanel (or subclass) to this layout.</div>
755 Remove a ContentPanel (or subclass) to this layout.
762 <dl class="detailList">
763 <dt class="heading">Parameters:</dt>
766 <span class="fixedFont"><a href="./String.html#constructor" roo:cls="String.html#constructor">String</a></span> <b>target</b>
769 <dd>The target region key (north, south, east, west or center).</dd>
772 <span class="fixedFont"><a href="./Number.html#constructor" roo:cls="Number.html#constructor">Number</a>/String/Roo.ContentPanel</span> <b>panel</b>
775 <dd>The index, id or panel to remove</dd>
783 <dl class="detailList">
784 <dt class="heading">Returns:</dt>
786 <dd><span class="fixedFont"><a href="./Roo.ContentPanel.html#constructor" roo:cls="Roo.ContentPanel.html#constructor">Roo.ContentPanel</a></span> The removed panel</dd>
808 <tr class="method-row config-row-alt1 expandable notInherited">
809 <td class="micon"><a class="exi" href="#expand"> </a></td>
813 <a id="Roo.BorderLayout-method-restoreState" name=".restoreState"></a>
814 <div class="fixedFont">
815 <span class="attributes"></span><b class="itemname">restoreState</b>
817 (<a href="./Roo.state.Provider.html#constructor" roo:cls="Roo.state.Provider.html#constructor">Roo.state.Provider</a> <B><i>provider</i></B>)
824 <div class="short">Restores this layout's state using Roo.state.Manager or the state provided by the passed provider.</div>
830 Restores this layout's state using Roo.state.Manager or the state provided by the passed provider.
837 <dl class="detailList">
838 <dt class="heading">Parameters:</dt>
841 <span class="fixedFont"><a href="./Roo.state.Provider.html#constructor" roo:cls="Roo.state.Provider.html#constructor">Roo.state.Provider</a></span> <b>provider</b>
844 <dd>(optional) An alternate state provider</dd>
870 <tr class="method-row config-row-alt0 expandable notInherited">
871 <td class="micon"><a class="exi" href="#expand"> </a></td>
875 <a id="Roo.BorderLayout-method-showPanel" name=".showPanel"></a>
876 <div class="fixedFont">
877 <span class="attributes"></span><b class="itemname">showPanel</b>
879 (<a href="./String.html#constructor" roo:cls="String.html#constructor">String</a>/ContentPanel <B><i>panelId</i></B>)
885 <a href="./Roo.ContentPanel.html#constructor" roo:cls="Roo.ContentPanel.html#constructor">Roo.ContentPanel</a>
894 <div class="short">Searches all regions for a panel with the specified id and activates (shows) it.</div>
900 Searches all regions for a panel with the specified id and activates (shows) it.
907 <dl class="detailList">
908 <dt class="heading">Parameters:</dt>
911 <span class="fixedFont"><a href="./String.html#constructor" roo:cls="String.html#constructor">String</a>/ContentPanel</span> <b>panelId</b>
914 <dd>The panels id or the panel itself</dd>
922 <dl class="detailList">
923 <dt class="heading">Returns:</dt>
925 <dd><span class="fixedFont"><a href="./Roo.ContentPanel.html#constructor" roo:cls="Roo.ContentPanel.html#constructor">Roo.ContentPanel</a></span> The shown panel or null</dd>
950 <!-- ============================== events summary / details ======================== -->
953 <a id="Roo.BorderLayout-events"></a>
959 <table cellspacing="0" class="member-table">
960 <caption class="Empty">Events - Has None</caption>
971 <!-- ============================== footer ================================= -->
972 <div class="fineprint" style="clear:both">
974 Documentation generated by <a href="http://www.akbkhome.com" target="_blankt">Introspection Doc Generator</a> on Fri Jul 16 2010 16:11:47 GMT+0800 (HKT)
976 <a href="http://www.jsdoctoolkit.org/" target="_blank">JsDoc Toolkit</a>