2 * Ext JS Library 2.2.1
\r
3 * Copyright(c) 2006-2009, Ext JS, LLC.
\r
4 * licensing@extjs.com
\r
6 * http://extjs.com/license
\r
10 * @class Ext.layout.CardLayout
\r
11 * @extends Ext.layout.FitLayout
\r
12 * <p>This layout contains multiple panels, each fit to the container, where only a single panel can be
\r
13 * visible at any given time. This layout style is most commonly used for wizards, tab implementations, etc.
\r
14 * This class is intended to be extended or created via the layout:'card' {@link Ext.Container#layout} config,
\r
15 * and should generally not need to be created directly via the new keyword.</p>
\r
16 * <p>The CardLayout's focal method is {@link #setActiveItem}. Since only one panel is displayed at a time,
\r
17 * the only way to move from one panel to the next is by calling setActiveItem, passing the id or index of
\r
18 * the next panel to display. The layout itself does not provide a mechanism for handling this navigation,
\r
19 * so that functionality must be provided by the developer.</p>
\r
20 * <p>In the following example, a simplistic wizard setup is demonstrated. A button bar is added
\r
21 * to the footer of the containing panel to provide navigation buttons. The buttons will be handled by a
\r
22 * common navigation routine -- for this example, the implementation of that routine has been ommitted since
\r
23 * it can be any type of custom logic. Note that other uses of a CardLayout (like a tab control) would require a
\r
24 * completely different implementation. For serious implementations, a better approach would be to extend
\r
25 * CardLayout to provide the custom functionality needed. Example usage:</p>
\r
27 var navHandler = function(direction){
\r
28 // This routine could contain business logic required to manage the navigation steps.
\r
29 // It would call setActiveItem as needed, manage navigation button state, handle any
\r
30 // branching logic that might be required, handle alternate actions like cancellation
\r
31 // or finalization, etc. A complete wizard implementation could get pretty
\r
32 // sophisticated depending on the complexity required, and should probably be
\r
33 // done as a subclass of CardLayout in a real-world implementation.
\r
36 var card = new Ext.Panel({
\r
37 title: 'Example Wizard',
\r
39 activeItem: 0, // make sure the active item is set on the container config!
\r
40 bodyStyle: 'padding:15px',
\r
42 // applied to each contained panel
\r
45 // just an example of one possible navigation scheme, using buttons
\r
50 handler: navHandler.createDelegate(this, [-1]),
\r
53 '->', // greedy spacer so that the buttons are aligned to each side
\r
57 handler: navHandler.createDelegate(this, [1])
\r
60 // the panels (or "cards") within the layout
\r
63 html: '<h1>Welcome to the Wizard!</h1><p>Step 1 of 3</p>'
\r
66 html: '<p>Step 2 of 3</p>'
\r
69 html: '<h1>Congratulations!</h1><p>Step 3 of 3 - Complete</p>'
\r
74 Ext.layout.CardLayout = Ext.extend(Ext.layout.FitLayout, {
\r
76 * @cfg {Boolean} deferredRender
\r
77 * True to render each contained item at the time it becomes active, false to render all contained items
\r
78 * as soon as the layout is rendered (defaults to false). If there is a significant amount of content or
\r
79 * a lot of heavy controls being rendered into panels that are not displayed by default, setting this to
\r
80 * true might improve performance.
\r
82 deferredRender : false,
\r
85 renderHidden : true,
\r
88 * Sets the active (visible) item in the layout.
\r
89 * @param {String/Number} item The string component id or numeric index of the item to activate
\r
91 setActiveItem : function(item){
\r
92 item = this.container.getComponent(item);
\r
93 if(this.activeItem != item){
\r
94 if(this.activeItem){
\r
95 this.activeItem.hide();
\r
97 this.activeItem = item;
\r
104 renderAll : function(ct, target){
\r
105 if(this.deferredRender){
\r
106 this.renderItem(this.activeItem, undefined, target);
\r
108 Ext.layout.CardLayout.superclass.renderAll.call(this, ct, target);
\r
112 Ext.Container.LAYOUTS['card'] = Ext.layout.CardLayout;