1 | /* |
---|
2 | * Ext JS Library 2.2.1 |
---|
3 | * Copyright(c) 2006-2009, Ext JS, LLC. |
---|
4 | * licensing@extjs.com |
---|
5 | * |
---|
6 | * http://extjs.com/license |
---|
7 | */ |
---|
8 | |
---|
9 | /** |
---|
10 | * @class Ext.layout.CardLayout |
---|
11 | * @extends Ext.layout.FitLayout |
---|
12 | * <p>This layout contains multiple panels, each fit to the container, where only a single panel 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 panel 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 mechanism 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> |
---|
26 | * <pre><code> |
---|
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. |
---|
34 | }; |
---|
35 | |
---|
36 | var card = new Ext.Panel({ |
---|
37 | title: 'Example Wizard', |
---|
38 | layout:'card', |
---|
39 | activeItem: 0, // make sure the active item is set on the container config! |
---|
40 | bodyStyle: 'padding:15px', |
---|
41 | defaults: { |
---|
42 | // applied to each contained panel |
---|
43 | border:false |
---|
44 | }, |
---|
45 | // just an example of one possible navigation scheme, using buttons |
---|
46 | bbar: [ |
---|
47 | { |
---|
48 | id: 'move-prev', |
---|
49 | text: 'Back', |
---|
50 | handler: navHandler.createDelegate(this, [-1]), |
---|
51 | disabled: true |
---|
52 | }, |
---|
53 | '->', // greedy spacer so that the buttons are aligned to each side |
---|
54 | { |
---|
55 | id: 'move-next', |
---|
56 | text: 'Next', |
---|
57 | handler: navHandler.createDelegate(this, [1]) |
---|
58 | } |
---|
59 | ], |
---|
60 | // the panels (or "cards") within the layout |
---|
61 | items: [{ |
---|
62 | id: 'card-0', |
---|
63 | html: '<h1>Welcome to the Wizard!</h1><p>Step 1 of 3</p>' |
---|
64 | },{ |
---|
65 | id: 'card-1', |
---|
66 | html: '<p>Step 2 of 3</p>' |
---|
67 | },{ |
---|
68 | id: 'card-2', |
---|
69 | html: '<h1>Congratulations!</h1><p>Step 3 of 3 - Complete</p>' |
---|
70 | }] |
---|
71 | }); |
---|
72 | </code></pre> |
---|
73 | */ |
---|
74 | Ext.layout.CardLayout = Ext.extend(Ext.layout.FitLayout, { |
---|
75 | /** |
---|
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. |
---|
81 | */ |
---|
82 | deferredRender : false, |
---|
83 | |
---|
84 | // private |
---|
85 | renderHidden : true, |
---|
86 | |
---|
87 | /** |
---|
88 | * Sets the active (visible) item in the layout. |
---|
89 | * @param {String/Number} item The string component id or numeric index of the item to activate |
---|
90 | */ |
---|
91 | setActiveItem : function(item){ |
---|
92 | item = this.container.getComponent(item); |
---|
93 | if(this.activeItem != item){ |
---|
94 | if(this.activeItem){ |
---|
95 | this.activeItem.hide(); |
---|
96 | } |
---|
97 | this.activeItem = item; |
---|
98 | item.show(); |
---|
99 | this.layout(); |
---|
100 | } |
---|
101 | }, |
---|
102 | |
---|
103 | // private |
---|
104 | renderAll : function(ct, target){ |
---|
105 | if(this.deferredRender){ |
---|
106 | this.renderItem(this.activeItem, undefined, target); |
---|
107 | }else{ |
---|
108 | Ext.layout.CardLayout.superclass.renderAll.call(this, ct, target); |
---|
109 | } |
---|
110 | } |
---|
111 | }); |
---|
112 | Ext.Container.LAYOUTS['card'] = Ext.layout.CardLayout; |
---|