/**
- * @class Ext.layout.container.Card
- * @extends Ext.layout.container.AbstractCard
- * <p>This layout manages multiple child Components, each fitted to the Container, where only a single child Component can be
- * visible at any given time. This layout style is most commonly used for wizards, tab implementations, etc.
- * This class is intended to be extended or created via the layout:'card' {@link Ext.container.Container#layout} config,
- * and should generally not need to be created directly via the new keyword.</p>
- * <p>The CardLayout's focal method is {@link #setActiveItem}. Since only one panel is displayed at a time,
- * the only way to move from one Component to the next is by calling setActiveItem, passing the id or index of
- * the next panel to display. The layout itself does not provide a user interface for handling this navigation,
- * so that functionality must be provided by the developer.</p>
- * <p>In the following example, a simplistic wizard setup is demonstrated. A button bar is added
- * to the footer of the containing panel to provide navigation buttons. The buttons will be handled by a
- * common navigation routine -- for this example, the implementation of that routine has been ommitted since
- * it can be any type of custom logic. Note that other uses of a CardLayout (like a tab control) would require a
- * completely different implementation. For serious implementations, a better approach would be to extend
- * CardLayout to provide the custom functionality needed.
- * {@img Ext.layout.container.Card/Ext.layout.container.Card.png Ext.layout.container.Card container layout}
- * Example usage:</p>
- * <pre><code>
- var navHandler = function(direction){
- // This routine could contain business logic required to manage the navigation steps.
- // It would call setActiveItem as needed, manage navigation button state, handle any
- // branching logic that might be required, handle alternate actions like cancellation
- // or finalization, etc. A complete wizard implementation could get pretty
- // sophisticated depending on the complexity required, and should probably be
- // done as a subclass of CardLayout in a real-world implementation.
- };
-
- Ext.create('Ext.panel.Panel', {
- title: 'Example Wizard',
- width: 300,
- height: 200,
- layout: 'card',
- activeItem: 0, // make sure the active item is set on the container config!
- bodyStyle: 'padding:15px',
- defaults: {
- // applied to each contained panel
- border:false
- },
- // just an example of one possible navigation scheme, using buttons
- bbar: [
- {
- id: 'move-prev',
- text: 'Back',
- handler: navHandler(this, [-1]),
- disabled: true
- },
- '->', // greedy spacer so that the buttons are aligned to each side
- {
- id: 'move-next',
- text: 'Next',
- handler: navHandler(this, [1])
- }],
- // the panels (or "cards") within the layout
- items: [{
- id: 'card-0',
- html: '<h1>Welcome to the Wizard!</h1><p>Step 1 of 3</p>'
- },{
- id: 'card-1',
- html: '<p>Step 2 of 3</p>'
- },{
- id: 'card-2',
- html: '<h1>Congratulations!</h1><p>Step 3 of 3 - Complete</p>'
- }],
- renderTo: Ext.getBody()
- });
- </code></pre>
- */
+
+
+
+
+ The source code
+
+
+
+
+
+
+
/**
+ * This layout manages multiple child Components, each fitted to the Container, where only a single child Component can be
+ * visible at any given time. This layout style is most commonly used for wizards, tab implementations, etc.
+ * This class is intended to be extended or created via the layout:'card' {@link Ext.container.Container#layout} config,
+ * and should generally not need to be created directly via the new keyword.
+ *
+ * The CardLayout's focal method is {@link #setActiveItem}. Since only one panel is displayed at a time,
+ * the only way to move from one Component to the next is by calling setActiveItem, passing the next panel to display
+ * (or its id or index). The layout itself does not provide a user interface for handling this navigation,
+ * so that functionality must be provided by the developer.
+ *
+ * To change the active card of a container, call the setActiveItem method of its layout:
+ *
+ * Ext.create('Ext.panel.Panel', {
+ * layout: 'card',
+ * items: [
+ * { html: 'Card 1' },
+ * { html: 'Card 2' }
+ * ],
+ * renderTo: Ext.getBody()
+ * });
+ *
+ * p.getLayout().setActiveItem(1);
+ *
+ * In the following example, a simplistic wizard setup is demonstrated. A button bar is added
+ * to the footer of the containing panel to provide navigation buttons. The buttons will be handled by a
+ * common navigation routine. Note that other uses of a CardLayout (like a tab control) would require a
+ * completely different implementation. For serious implementations, a better approach would be to extend
+ * CardLayout to provide the custom functionality needed.
+ *
+ * @example
+ * var navigate = function(panel, direction){
+ * // This routine could contain business logic required to manage the navigation steps.
+ * // It would call setActiveItem as needed, manage navigation button state, handle any
+ * // branching logic that might be required, handle alternate actions like cancellation
+ * // or finalization, etc. A complete wizard implementation could get pretty
+ * // sophisticated depending on the complexity required, and should probably be
+ * // done as a subclass of CardLayout in a real-world implementation.
+ * var layout = panel.getLayout();
+ * layout[direction]();
+ * Ext.getCmp('move-prev').setDisabled(!layout.getPrev());
+ * Ext.getCmp('move-next').setDisabled(!layout.getNext());
+ * };
+ *
+ * Ext.create('Ext.panel.Panel', {
+ * title: 'Example Wizard',
+ * width: 300,
+ * height: 200,
+ * layout: 'card',
+ * bodyStyle: 'padding:15px',
+ * defaults: {
+ * // applied to each contained panel
+ * border: false
+ * },
+ * // just an example of one possible navigation scheme, using buttons
+ * bbar: [
+ * {
+ * id: 'move-prev',
+ * text: 'Back',
+ * handler: function(btn) {
+ * navigate(btn.up("panel"), "prev");
+ * },
+ * disabled: true
+ * },
+ * '->', // greedy spacer so that the buttons are aligned to each side
+ * {
+ * id: 'move-next',
+ * text: 'Next',
+ * handler: function(btn) {
+ * navigate(btn.up("panel"), "next");
+ * }
+ * }
+ * ],
+ * // the panels (or "cards") within the layout
+ * items: [{
+ * id: 'card-0',
+ * html: '<h1>Welcome to the Wizard!</h1><p>Step 1 of 3</p>'
+ * },{
+ * id: 'card-1',
+ * html: '<p>Step 2 of 3</p>'
+ * },{
+ * id: 'card-2',
+ * html: '<h1>Congratulations!</h1><p>Step 3 of 3 - Complete</p>'
+ * }],
+ * renderTo: Ext.getBody()
+ * });
+ */
Ext.define('Ext.layout.container.Card', {
/* Begin Definitions */
@@ -78,15 +113,32 @@ Ext.define('Ext.layout.container.Card', {
/* End Definitions */
+ /**
+ * Makes the given card active.
+ *
+ * var card1 = Ext.create('Ext.panel.Panel', {itemId: 'card-1'});
+ * var card2 = Ext.create('Ext.panel.Panel', {itemId: 'card-2'});
+ * var panel = Ext.create('Ext.panel.Panel', {
+ * layout: 'card',
+ * activeItem: 0,
+ * items: [card1, card2]
+ * });
+ * // These are all equivalent
+ * panel.getLayout().setActiveItem(card2);
+ * panel.getLayout().setActiveItem('card-2');
+ * panel.getLayout().setActiveItem(1);
+ *
+ * @param {Ext.Component/Number/String} newCard The component, component {@link Ext.Component#id id},
+ * {@link Ext.Component#itemId itemId}, or index of component.
+ * @return {Ext.Component} the activated component or false when nothing activated.
+ * False is returned also when trying to activate an already active card.
+ */
setActiveItem: function(newCard) {
var me = this,
owner = me.owner,
oldCard = me.activeItem,
newIndex;
- // Block upward layouts until we are done.
- me.layoutBusy = true;
-
newCard = me.parseActiveItem(newCard);
newIndex = owner.items.indexOf(newCard);
@@ -108,22 +160,22 @@ Ext.define('Ext.layout.container.Card', {
// Fire the beforeactivate and beforedeactivate events on the cards
if (newCard.fireEvent('beforeactivate', newCard, oldCard) === false) {
- me.layoutBusy = false;
return false;
}
if (oldCard && oldCard.fireEvent('beforedeactivate', oldCard, newCard) === false) {
- me.layoutBusy = false;
return false;
}
// If the card hasnt been sized yet, do it now
- if (!me.sizeAllCards) {
- me.setItemBox(newCard, me.getTargetBox());
- }
- else {
+ if (me.sizeAllCards) {
// onLayout calls setItemBox
me.onLayout();
}
+ else {
+ me.setItemBox(newCard, me.getTargetBox());
+ }
+
+ me.owner.suspendLayout = true;
if (oldCard) {
if (me.hideInactive) {
@@ -133,23 +185,27 @@ Ext.define('Ext.layout.container.Card', {
}
// Make sure the new card is shown
+ me.owner.suspendLayout = false;
if (newCard.hidden) {
newCard.show();
+ } else {
+ me.onLayout();
}
newCard.fireEvent('activate', newCard, oldCard);
- me.layoutBusy = false;
-
- if (!me.sizeAllCards) {
- if (!owner.componentLayout.layoutBusy) {
- me.onLayout();
- }
- }
return newCard;
}
-
- me.layoutBusy = false;
return false;
- }
-});
\ No newline at end of file
+ },
+
+ configureItem: function(item) {
+ // Card layout only controls dimensions which IT has controlled.
+ // That calculation has to be determined at run time by examining the ownerCt's isFixedWidth()/isFixedHeight() methods
+ item.layoutManagedHeight = 0;
+ item.layoutManagedWidth = 0;
+
+ this.callParent(arguments);
+ }});