docs/source/Card.html

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