Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / docs / source / AbstractCard.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5   <title>The source code</title>
6   <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
7   <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
8   <style type="text/css">
9     .highlight { display: block; background-color: #ddd; }
10   </style>
11   <script type="text/javascript">
12     function highlight() {
13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
14     }
15   </script>
16 </head>
17 <body onload="prettyPrint(); highlight();">
18   <pre class="prettyprint lang-js"><span id='Ext-layout-container-AbstractCard'>/**
19 </span> * Abstract base class for {@link Ext.layout.container.Card Card layout}.
20  * @private
21  */
22 Ext.define('Ext.layout.container.AbstractCard', {
23
24     /* Begin Definitions */
25
26     extend: 'Ext.layout.container.Fit',
27
28     /* End Definitions */
29
30     type: 'card',
31
32     sizeAllCards: false,
33
34     hideInactive: true,
35
36 <span id='Ext-layout-container-AbstractCard-cfg-deferredRender'>    /**
37 </span>     * @cfg {Boolean} deferredRender
38      * True to render each contained item at the time it becomes active, false to render all contained items
39      * as soon as the layout is rendered.  If there is a significant amount of content or
40      * a lot of heavy controls being rendered into panels that are not displayed by default, setting this to
41      * true might improve performance.
42      */
43     deferredRender : false,
44
45     beforeLayout: function() {
46         var me = this;
47         me.getActiveItem();
48         if (me.activeItem &amp;&amp; me.deferredRender) {
49             me.renderItems([me.activeItem], me.getRenderTarget());
50             return true;
51         }
52         else {
53             return this.callParent(arguments);
54         }
55     },
56
57     renderChildren: function () {
58         if (!this.deferredRender) {
59             this.getActiveItem();
60             this.callParent();
61         }
62     },
63
64     onLayout: function() {
65         var me = this,
66             activeItem = me.activeItem,
67             items = me.getVisibleItems(),
68             ln = items.length,
69             targetBox = me.getTargetBox(),
70             i, item;
71
72         for (i = 0; i &lt; ln; i++) {
73             item = items[i];
74             me.setItemBox(item, targetBox);
75         }
76
77         if (!me.firstActivated &amp;&amp; activeItem) {
78             if (activeItem.fireEvent('beforeactivate', activeItem) !== false) {
79                 activeItem.fireEvent('activate', activeItem);
80             }
81             me.firstActivated = true;
82         }
83     },
84
85     isValidParent : function(item, target, position) {
86         // Note: Card layout does not care about order within the target because only one is ever visible.
87         // We only care whether the item is a direct child of the target.
88         var itemEl = item.el ? item.el.dom : Ext.getDom(item);
89         return (itemEl &amp;&amp; itemEl.parentNode === (target.dom || target)) || false;
90     },
91
92 <span id='Ext-layout-container-AbstractCard-method-getActiveItem'>    /**
93 </span>     * Return the active (visible) component in the layout.
94      * @returns {Ext.Component}
95      */
96     getActiveItem: function() {
97         var me = this;
98         if (!me.activeItem &amp;&amp; me.owner) {
99             me.activeItem = me.parseActiveItem(me.owner.activeItem);
100         }
101
102         if (me.activeItem &amp;&amp; me.owner.items.indexOf(me.activeItem) != -1) {
103             return me.activeItem;
104         }
105
106         return null;
107     },
108
109     // @private
110     parseActiveItem: function(item) {
111         if (item &amp;&amp; item.isComponent) {
112             return item;
113         }
114         else if (typeof item == 'number' || item === undefined) {
115             return this.getLayoutItems()[item || 0];
116         }
117         else {
118             return this.owner.getComponent(item);
119         }
120     },
121
122     // @private
123     configureItem: function(item, position) {
124         this.callParent([item, position]);
125         if (this.hideInactive &amp;&amp; this.activeItem !== item) {
126             item.hide();
127         }
128         else {
129             item.show();
130         }
131     },
132
133     onRemove: function(component) {
134         if (component === this.activeItem) {
135             this.activeItem = null;
136             if (this.owner.items.getCount() === 0) {
137                 this.firstActivated = false;
138             }
139         }
140     },
141
142     // @private
143     getAnimation: function(newCard, owner) {
144         var newAnim = (newCard || {}).cardSwitchAnimation;
145         if (newAnim === false) {
146             return false;
147         }
148         return newAnim || owner.cardSwitchAnimation;
149     },
150
151 <span id='Ext-layout-container-AbstractCard-method-getNext'>    /**
152 </span>     * Return the active (visible) component in the layout to the next card
153      * @returns {Ext.Component} The next component or false.
154      */
155     getNext: function() {
156         //NOTE: Removed the JSDoc for this function's arguments because it is not actually supported in 4.0. This
157         //should come back in 4.1
158         var wrap = arguments[0];
159         var items = this.getLayoutItems(),
160             index = Ext.Array.indexOf(items, this.activeItem);
161         return items[index + 1] || (wrap ? items[0] : false);
162     },
163
164 <span id='Ext-layout-container-AbstractCard-method-next'>    /**
165 </span>     * Sets the active (visible) component in the layout to the next card
166      * @return {Ext.Component} the activated component or false when nothing activated.
167      */
168     next: function() {
169         //NOTE: Removed the JSDoc for this function's arguments because it is not actually supported in 4.0. This
170         //should come back in 4.1
171         var anim = arguments[0], wrap = arguments[1];
172         return this.setActiveItem(this.getNext(wrap), anim);
173     },
174
175 <span id='Ext-layout-container-AbstractCard-method-getPrev'>    /**
176 </span>     * Return the active (visible) component in the layout to the previous card
177      * @returns {Ext.Component} The previous component or false.
178      */
179     getPrev: function() {
180         //NOTE: Removed the JSDoc for this function's arguments because it is not actually supported in 4.0. This
181         //should come back in 4.1
182         var wrap = arguments[0];
183         var items = this.getLayoutItems(),
184             index = Ext.Array.indexOf(items, this.activeItem);
185         return items[index - 1] || (wrap ? items[items.length - 1] : false);
186     },
187
188 <span id='Ext-layout-container-AbstractCard-method-prev'>    /**
189 </span>     * Sets the active (visible) component in the layout to the previous card
190      * @return {Ext.Component} the activated component or false when nothing activated.
191      */
192     prev: function() {
193         //NOTE: Removed the JSDoc for this function's arguments because it is not actually supported in 4.0. This
194         //should come back in 4.1
195         var anim = arguments[0], wrap = arguments[1];
196         return this.setActiveItem(this.getPrev(wrap), anim);
197     }
198 });
199 </pre>
200 </body>
201 </html>