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