docs/source/Card.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="../prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../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-Card'>/**
  19 </span> * @class Ext.layout.container.Card
  20  * @extends Ext.layout.container.AbstractCard
  21  *
  22  * This layout manages multiple child Components, each fitted to the Container, where only a single child Component can be
  23  * visible at any given time.  This layout style is most commonly used for wizards, tab implementations, etc.
  24  * This class is intended to be extended or created via the layout:'card' {@link Ext.container.Container#layout} config,
  25  * and should generally not need to be created directly via the new keyword.
  26  *
  27  * The CardLayout's focal method is {@link #setActiveItem}.  Since only one panel is displayed at a time,
  28  * the only way to move from one Component to the next is by calling setActiveItem, passing the id or index of
  29  * the next panel to display.  The layout itself does not provide a user interface for handling this navigation,
  30  * so that functionality must be provided by the developer.
  31  *
  32  * In the following example, a simplistic wizard setup is demonstrated.  A button bar is added
  33  * to the footer of the containing panel to provide navigation buttons.  The buttons will be handled by a
  34  * common navigation routine.  Note that other uses of a CardLayout (like a tab control) would require a
  35  * completely different implementation.  For serious implementations, a better approach would be to extend
  36  * CardLayout to provide the custom functionality needed.
  37  *
  38  * {@img Ext.layout.container.Card/Ext.layout.container.Card.png Ext.layout.container.Card container layout}
  39  *
  40  * Example usage:
  41  *
  42  *     var navigate = function(panel, direction){
  43  *         // This routine could contain business logic required to manage the navigation steps.
  44  *         // It would call setActiveItem as needed, manage navigation button state, handle any
  45  *         // branching logic that might be required, handle alternate actions like cancellation
  46  *         // or finalization, etc.  A complete wizard implementation could get pretty
  47  *         // sophisticated depending on the complexity required, and should probably be
  48  *         // done as a subclass of CardLayout in a real-world implementation.
  49  *         var layout = panel.getLayout();
  50  *         layout[direction]();
  51  *         Ext.getCmp('move-prev').setDisabled(!layout.getPrev());
  52  *         Ext.getCmp('move-next').setDisabled(!layout.getNext());
  53  *     };
  54  *
  55  *     Ext.create('Ext.panel.Panel', {
  56  *         title: 'Example Wizard',
  57  *         width: 300,
  58  *         height: 200,
  59  *         layout: 'card',
  60  *         activeItem: 0, // make sure the active item is set on the container config!
  61  *         bodyStyle: 'padding:15px',
  62  *         defaults: {
  63  *             // applied to each contained panel
  64  *             border: false
  65  *         },
  66  *         // just an example of one possible navigation scheme, using buttons
  67  *         bbar: [
  68  *             {
  69  *                 id: 'move-prev',
  70  *                 text: 'Back',
  71  *                 handler: function(btn) {
  72  *                     navigate(btn.up(&quot;panel&quot;), &quot;prev&quot;);
  73  *                 },
  74  *                 disabled: true
  75  *             },
  76  *             '-&gt;', // greedy spacer so that the buttons are aligned to each side
  77  *             {
  78  *                 id: 'move-next',
  79  *                 text: 'Next',
  80  *                 handler: function(btn) {
  81  *                     navigate(btn.up(&quot;panel&quot;), &quot;next&quot;);
  82  *                 }
  83  *             }
  84  *         ],
  85  *         // the panels (or &quot;cards&quot;) within the layout
  86  *         items: [{
  87  *             id: 'card-0',
  88  *             html: '&lt;h1&gt;Welcome to the Wizard!&lt;/h1&gt;&lt;p&gt;Step 1 of 3&lt;/p&gt;'
  89  *         },{
  90  *             id: 'card-1',
  91  *             html: '&lt;p&gt;Step 2 of 3&lt;/p&gt;'
  92  *         },{
  93  *             id: 'card-2',
  94  *             html: '&lt;h1&gt;Congratulations!&lt;/h1&gt;&lt;p&gt;Step 3 of 3 - Complete&lt;/p&gt;'
  95  *         }],
  96  *         renderTo: Ext.getBody()
  97  *     });
  98  */
  99 Ext.define('Ext.layout.container.Card', {
 100
 101     /* Begin Definitions */
 102
 103     alias: ['layout.card'],
 104     alternateClassName: 'Ext.layout.CardLayout',
 105
 106     extend: 'Ext.layout.container.AbstractCard',
 107
 108     /* End Definitions */
 109
 110 <span id='Ext-layout-container-Card-method-setActiveItem'>    /**
 111 </span>     * Makes the given card active.
 112      *
 113      *     var card1 = Ext.create('Ext.panel.Panel', {itemId: 'card-1'});
 114      *     var card2 = Ext.create('Ext.panel.Panel', {itemId: 'card-2'});
 115      *     var panel = Ext.create('Ext.panel.Panel', {
 116      *         layout: 'card',
 117      *         activeItem: 0,
 118      *         items: [card1, card2]
 119      *     });
 120      *     // These are all equivalent
 121      *     panel.getLayout().setActiveItem(card2);
 122      *     panel.getLayout().setActiveItem('card-2');
 123      *     panel.getLayout().setActiveItem(1);
 124      *
 125      * @param {Ext.Component/Number/String} newCard  The component, component {@link Ext.Component#id id},
 126      * {@link Ext.Component#itemId itemId}, or index of component.
 127      * @return {Ext.Component} the activated component or false when nothing activated.
 128      * False is returned also when trying to activate an already active card.
 129      */
 130     setActiveItem: function(newCard) {
 131         var me = this,
 132             owner = me.owner,
 133             oldCard = me.activeItem,
 134             newIndex;
 135
 136         newCard = me.parseActiveItem(newCard);
 137         newIndex = owner.items.indexOf(newCard);
 138
 139         // If the card is not a child of the owner, then add it
 140         if (newIndex == -1) {
 141             newIndex = owner.items.items.length;
 142             owner.add(newCard);
 143         }
 144
 145         // Is this a valid, different card?
 146         if (newCard &amp;&amp; oldCard != newCard) {
 147             // If the card has not been rendered yet, now is the time to do so.
 148             if (!newCard.rendered) {
 149                 me.renderItem(newCard, me.getRenderTarget(), owner.items.length);
 150                 me.configureItem(newCard, 0);
 151             }
 152
 153             me.activeItem = newCard;
 154
 155             // Fire the beforeactivate and beforedeactivate events on the cards
 156             if (newCard.fireEvent('beforeactivate', newCard, oldCard) === false) {
 157                 return false;
 158             }
 159             if (oldCard &amp;&amp; oldCard.fireEvent('beforedeactivate', oldCard, newCard) === false) {
 160                 return false;
 161             }
 162
 163             // If the card hasnt been sized yet, do it now
 164             if (me.sizeAllCards) {
 165                 // onLayout calls setItemBox
 166                 me.onLayout();
 167             }
 168             else {
 169                 me.setItemBox(newCard, me.getTargetBox());
 170             }
 171
 172             me.owner.suspendLayout = true;
 173
 174             if (oldCard) {
 175                 if (me.hideInactive) {
 176                     oldCard.hide();
 177                 }
 178                 oldCard.fireEvent('deactivate', oldCard, newCard);
 179             }
 180
 181             // Make sure the new card is shown
 182             me.owner.suspendLayout = false;
 183             if (newCard.hidden) {
 184                 newCard.show();
 185             } else {
 186                 me.onLayout();
 187             }
 188
 189             newCard.fireEvent('activate', newCard, oldCard);
 190
 191             return newCard;
 192         }
 193         return false;
 194     },
 195
 196     configureItem: function(item) {
 197
 198         // Card layout only controls dimensions which IT has controlled.
 199         // That calculation has to be determined at run time by examining the ownerCt's isFixedWidth()/isFixedHeight() methods
 200         item.layoutManagedHeight = 0;
 201         item.layoutManagedWidth = 0;
 202
 203         this.callParent(arguments);
 204     }});</pre>
 205 </body>
 206 </html>