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