PageRenderTime 66ms CodeModel.GetById 58ms app.highlight 5ms RepoModel.GetById 0ms app.codeStats 0ms

/javascripts/lib/docs/output/Ext.layout.CardLayout.html

https://bitbucket.org/ksokmesa/sina-asian
HTML | 95 lines | 94 code | 1 blank | 0 comment | 0 complexity | e17920ff622be9ac582705da4d8ce9d6 MD5 | raw file
Possible License(s): GPL-3.0
 1<div class="body-wrap" xmlns:ext="http://www.extjs.com"><div class="top-tools"><a class="inner-link" href="#Ext.layout.CardLayout-props"><img src="../resources/images/default/s.gif" class="item-icon icon-prop">Properties</a>&#13;<a class="inner-link" href="#Ext.layout.CardLayout-methods"><img src="../resources/images/default/s.gif" class="item-icon icon-method">Methods</a>&#13;<a class="inner-link" href="#Ext.layout.CardLayout-events"><img src="../resources/images/default/s.gif" class="item-icon icon-event">Events</a>&#13;<a class="inner-link" href="#Ext.layout.CardLayout-configs"><img src="../resources/images/default/s.gif" class="item-icon icon-config">Config Options</a>&#13;<a class="bookmark" href="../docs/?class=Ext.layout.CardLayout"><img src="../resources/images/default/s.gif" class="item-icon icon-fav">Direct Link</a>&#13;</div><div class="inheritance res-block"><pre class="res-block-inner"><a href="output/Ext.layout.ContainerLayout.html" ext:member="" ext:cls="Ext.layout.ContainerLayout">ContainerLayout</a>&#13;&nbsp;&nbsp;<img src="resources/elbow-end.gif"><a href="output/Ext.layout.FitLayout.html" ext:member="" ext:cls="Ext.layout.FitLayout">FitLayout</a>&#13;&nbsp;&nbsp;&nbsp;&nbsp;<img src="resources/elbow-end.gif">CardLayout</pre></div><h1>Class <a href="source/CardLayout.html#cls-Ext.layout.CardLayout">Ext.layout.CardLayout</a></h1><table cellspacing="0"><tr><td class="label">Package:</td><td class="hd-info">Ext.layout</td></tr><tr><td class="label">Defined In:</td><td class="hd-info"><a href="source/CardLayout.html#cls-Ext.layout.CardLayout">CardLayout.js</a></td></tr><tr><td class="label">Class:</td><td class="hd-info"><a href="source/CardLayout.html#cls-Ext.layout.CardLayout">CardLayout</a></td></tr><tr><td class="label">Extends:</td><td class="hd-info"><a href="output/Ext.layout.FitLayout.html" ext:cls="Ext.layout.FitLayout" ext:member="">FitLayout</a></td></tr></table><div class="description"><p>This layout manages multiple child Components, each fitted to the Container, where only a single child Component can be
 2visible at any given time.  This layout style is most commonly used for wizards, tab implementations, etc.
 3This class is intended to be extended or created via the layout:'card' <a href="output/Ext.Container.html#Ext.Container-layout" ext:member="layout" ext:cls="Ext.Container">Ext.Container.layout</a> config,
 4and should generally not need to be created directly via the new keyword.</p>
 5<p>The CardLayout's focal method is <a href="output/Ext.layout.CardLayout.html#Ext.layout.CardLayout-setActiveItem" ext:member="setActiveItem" ext:cls="Ext.layout.CardLayout">setActiveItem</a>.  Since only one panel is displayed at a time,
 6the only way to move from one Component to the next is by calling setActiveItem, passing the id or index of
 7the next panel to display.  The layout itself does not provide a user interface for handling this navigation,
 8so that functionality must be provided by the developer.</p>
 9<p>In the following example, a simplistic wizard setup is demonstrated.  A button bar is added
10to the footer of the containing panel to provide navigation buttons.  The buttons will be handled by a
11common navigation routine -- for this example, the implementation of that routine has been ommitted since
12it can be any type of custom logic.  Note that other uses of a CardLayout (like a tab control) would require a
13completely different implementation.  For serious implementations, a better approach would be to extend
14CardLayout to provide the custom functionality needed.  Example usage:</p>
15<pre><code><b>var</b> navHandler = <b>function</b>(direction){
16    <i>// This routine could contain business logic required to manage the navigation steps.</i>
17    <i>// It would call setActiveItem as needed, manage navigation button state, handle any</i>
18    <i>// branching logic that might be required, handle alternate actions like cancellation</i>
19    <i>// or finalization, etc.  A complete wizard implementation could get pretty</i>
20    <i>// sophisticated depending on the complexity required, and should probably be</i>
21    <i>// done as a subclass of CardLayout <b>in</b> a real-world implementation.</i>
22};
23
24<b>var</b> card = <b>new</b> Ext.Panel({
25    title: <em>'Example Wizard'</em>,
26    layout:<em>'card'</em>,
27    activeItem: 0, <i>// make sure the active item is set on the container config!</i>
28    bodyStyle: <em>'padding:15px'</em>,
29    defaults: {
30        <i>// applied to each contained panel</i>
31        border:false
32    },
33    <i>// just an example of one possible navigation scheme, using buttons</i>
34    bbar: [
35        {
36            id: <em>'move-prev'</em>,
37            text: <em>'Back'</em>,
38            handler: navHandler.createDelegate(this, [-1]),
39            disabled: true
40        },
41        <em>'->'</em>, <i>// greedy spacer so that the buttons are aligned to each side</i>
42        {
43            id: <em>'move-next'</em>,
44            text: <em>'Next'</em>,
45            handler: navHandler.createDelegate(this, [1])
46        }
47    ],
48    <i>// the panels (or <em>"cards"</em>) within the layout</i>
49    items: [{
50        id: <em>'card-0'</em>,
51        html: <em>'&lt;h1&gt;Welcome to the Wizard!&lt;/h1&gt;&lt;p&gt;Step 1 of 3&lt;/p&gt;'</em>
52    },{
53        id: <em>'card-1'</em>,
54        html: <em>'&lt;p&gt;Step 2 of 3&lt;/p&gt;'</em>
55    },{
56        id: <em>'card-2'</em>,
57        html: <em>'&lt;h1&gt;Congratulations!&lt;/h1&gt;&lt;p&gt;Step 3 of 3 - Complete&lt;/p&gt;'</em>
58    }]
59});</code></pre></div><div class="hr"></div><a id="Ext.layout.CardLayout-configs"></a><h2>Config Options</h2><table cellspacing="0" class="member-table"><tbody><tr><th colspan="2" class="sig-header">Config Options</th><th class="msource-header">Defined By</th></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.layout.CardLayout-deferredRender"></a><b><a href="source/CardLayout.html#cfg-Ext.layout.CardLayout-deferredRender">deferredRender</a></b> : Boolean<div class="mdesc"><div class="short">True to render each contained item at the time it becomes active, false to render all contained items
60as soon as the ...</div><div class="long">True to render each contained item at the time it becomes active, false to render all contained items
61as soon as the layout is rendered (defaults to false).  If there is a significant amount of content or
62a lot of heavy controls being rendered into panels that are not displayed by default, setting this to
63true might improve performance.</div></div></td><td class="msource">CardLayout</td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.layout.ContainerLayout-extraCls"></a><b><a href="source/ContainerLayout.html#cfg-Ext.layout.ContainerLayout-extraCls">extraCls</a></b> : String<div class="mdesc"><div class="short">An optional extra CSS class that will be added to the container. This can be useful for adding
64customized styles to t...</div><div class="long"><p>An optional extra CSS class that will be added to the container. This can be useful for adding
65customized styles to the container or any of its children using standard CSS rules. See
66<a href="output/Ext.Component.html" ext:cls="Ext.Component">Ext.Component</a>.<a href="output/Ext.Component.html#Ext.Component-ctCls" ext:member="ctCls" ext:cls="Ext.Component">ctCls</a> also.</p>
67<p><b>Note</b>: <tt>extraCls</tt> defaults to <tt>''</tt> except for the following classes
68which assign a value by default:
69<div class="mdetail-params"><ul>
70<li><a href="output/Ext.layout.AbsoluteLayout.html" ext:cls="Ext.layout.AbsoluteLayout">Absolute Layout</a> : <tt>'x-abs-layout-item'</tt></li>
71<li><a href="output/Ext.layout.Box.html" ext:cls="Ext.layout.Box">Box Layout</a> : <tt>'x-box-item'</tt></li>
72<li><a href="output/Ext.layout.ColumnLayout.html" ext:cls="Ext.layout.ColumnLayout">Column Layout</a> : <tt>'x-column'</tt></li>
73</ul></div>
74To configure the above Classes with an extra CSS class append to the default.  For example,
75for ColumnLayout:<pre><code>extraCls: <em>'x-column custom-class'</em></code></pre>
76</p></div></div></td><td class="msource"><a href="output/Ext.layout.ContainerLayout.html#extraCls" ext:member="#extraCls" ext:cls="Ext.layout.ContainerLayout">ContainerLayout</a></td></tr><tr class="config-row  "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.layout.CardLayout-layoutOnCardChange"></a><b><a href="source/CardLayout.html#cfg-Ext.layout.CardLayout-layoutOnCardChange">layoutOnCardChange</a></b> : Boolean<div class="mdesc">True to force a layout of the active item when the active card is changed. Defaults to false.</div></td><td class="msource">CardLayout</td></tr></tbody></table><a id="Ext.layout.CardLayout-props"></a><h2>Public Properties</h2><table cellspacing="0" class="member-table"><tbody><tr><th colspan="2" class="sig-header">Property</th><th class="msource-header">Defined By</th></tr><tr class="property-row expandable inherited"><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.layout.ContainerLayout-activeItem"></a><b><a href="source/ContainerLayout.html#prop-Ext.layout.ContainerLayout-activeItem">activeItem</a></b> : Ext.Component<div class="mdesc"><div class="short">A reference to the Ext.Component that is active.  For example, if(myPanel.layout.activeItem.id == 'item-1') { ... }
77a...</div><div class="long">A reference to the <a href="output/Ext.Component.html" ext:cls="Ext.Component">Ext.Component</a> that is active.  For example, <pre><code><b>if</b>(myPanel.layout.activeItem.id == <em>'item-1'</em>) { ... }</code></pre>
78<tt>activeItem</tt> only applies to layout styles that can display items one at a time
79(like <a href="output/Ext.layout.AccordionLayout.html" ext:cls="Ext.layout.AccordionLayout">Ext.layout.AccordionLayout</a>, <a href="output/Ext.layout.CardLayout.html" ext:cls="Ext.layout.CardLayout">Ext.layout.CardLayout</a>
80and <a href="output/Ext.layout.FitLayout.html" ext:cls="Ext.layout.FitLayout">Ext.layout.FitLayout</a>).  Read-only.  Related to <a href="output/Ext.Container.html#Ext.Container-activeItem" ext:member="activeItem" ext:cls="Ext.Container">Ext.Container.activeItem</a>.</div></div></td><td class="msource"><a href="output/Ext.layout.ContainerLayout.html#activeItem" ext:member="#activeItem" ext:cls="Ext.layout.ContainerLayout">ContainerLayout</a></td></tr><tr class="property-row expandable inherited"><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.layout.ContainerLayout-fieldTpl"></a><b><a href="source/ContainerLayout.html#prop-Ext.layout.ContainerLayout-fieldTpl">fieldTpl</a></b> : Ext.Template<div class="mdesc"><div class="short">The Ext.Template used by Field rendering layout classes (such as
81Ext.layout.FormLayout) to create the DOM structure o...</div><div class="long">The <a href="output/Ext.Template.html" ext:cls="Ext.Template">Ext.Template</a> used by Field rendering layout classes (such as
82<a href="output/Ext.layout.FormLayout.html" ext:cls="Ext.layout.FormLayout">Ext.layout.FormLayout</a>) to create the DOM structure of a fully wrapped,
83labeled and styled form Field. A default Template is supplied, but this may be
84overriden to create custom field structures. The template processes values returned from
85<a href="output/Ext.layout.FormLayout.html#Ext.layout.FormLayout-getTemplateArgs" ext:member="getTemplateArgs" ext:cls="Ext.layout.FormLayout">Ext.layout.FormLayout.getTemplateArgs</a>.</div></div></td><td class="msource"><a href="output/Ext.layout.ContainerLayout.html#fieldTpl" ext:member="#fieldTpl" ext:cls="Ext.layout.ContainerLayout">ContainerLayout</a></td></tr><tr class="property-row expandable inherited"><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.layout.ContainerLayout-if"></a><b><a href="source/ContainerLayout.html#prop-Ext.layout.ContainerLayout-if">if</a></b> : Object<div class="mdesc"><div class="short">This monitorResize flag will be renamed soon as to avoid confusion
86with the Container version which hooks onWindowRes...</div><div class="long">This monitorResize flag will be renamed soon as to avoid confusion
87with the Container version which hooks onWindowResize to doLayout
88monitorResize flag in this context attaches the resize event between
89a container and it's layout</div></div></td><td class="msource"><a href="output/Ext.layout.ContainerLayout.html#if" ext:member="#if" ext:cls="Ext.layout.ContainerLayout">ContainerLayout</a></td></tr></tbody></table><a id="Ext.layout.CardLayout-methods"></a><h2>Public Methods</h2><table cellspacing="0" class="member-table"><tbody><tr><th colspan="2" class="sig-header">Method</th><th class="msource-header">Defined By</th></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.layout.ContainerLayout-parseMargins"></a><b><a href="source/ContainerLayout.html#method-Ext.layout.ContainerLayout-parseMargins">parseMargins</a></b>(&nbsp;<code>Number|String&nbsp;v</code>&nbsp;)
90    :
91                                        Object<div class="mdesc"><div class="short">Parses a number or string representing margin sizes into an object. Supports CSS-style margin declarations
92(e.g. 10, ...</div><div class="long">Parses a number or string representing margin sizes into an object. Supports CSS-style margin declarations
93(e.g. 10, "10", "10 10", "10 10 10" and "10 10 10 10" are all valid options and would return the same result)<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>v</code> : Number|String<div class="sub-desc">The encoded margins</div></li></ul><strong>Returns:</strong><ul><li><code>Object</code><div class="sub-desc">An object with margin sizes for top, right, bottom and left</div></li></ul></div></div></div></td><td class="msource"><a href="output/Ext.layout.ContainerLayout.html#parseMargins" ext:member="#parseMargins" ext:cls="Ext.layout.ContainerLayout">ContainerLayout</a></td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.layout.CardLayout-setActiveItem"></a><b><a href="source/CardLayout.html#method-Ext.layout.CardLayout-setActiveItem">setActiveItem</a></b>(&nbsp;<code>String/Number&nbsp;item</code>&nbsp;)
94    :
95                                        void<div class="mdesc"><div class="short">Sets the active (visible) item in the layout.</div><div class="long">Sets the active (visible) item in the layout.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>item</code> : String/Number<div class="sub-desc">The string component id or numeric index of the item to activate</div></li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource">CardLayout</td></tr></tbody></table><a id="Ext.layout.CardLayout-events"></a><h2>Public Events</h2><div class="no-members">This class has no public events.</div></div>