X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/2e847cf21b8ab9d15fa167b315ca5b2fa92638fc..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/docs/output/Ext.layout.CardLayout.html diff --git a/docs/output/Ext.layout.CardLayout.html b/docs/output/Ext.layout.CardLayout.html deleted file mode 100644 index 43f316f1..00000000 --- a/docs/output/Ext.layout.CardLayout.html +++ /dev/null @@ -1,87 +0,0 @@ -
ContainerLayout FitLayout CardLayout
Package: | Ext.layout |
Defined In: | CardLayout.js |
Class: | CardLayout |
Extends: | FitLayout |
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' Ext.Container.layout config, -and should generally not need to be created directly via the new keyword.
-The CardLayout's focal method is 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.
-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. Example usage:
-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.
-};
-
-var card = new Ext.Panel({
- title: 'Example Wizard',
- 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.createDelegate(this, [-1]),
- disabled: true
- },
- '->', // greedy spacer so that the buttons are aligned to each side
- {
- id: 'move-next',
- text: 'Next',
- handler: navHandler.createDelegate(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>'
- }]
-});
Config Options | Defined By | |
---|---|---|
deferredRender : Boolean True to render each contained item at the time it becomes active, false to render all contained items
-as soon as the... True to render each contained item at the time it becomes active, false to render all contained items
-as soon as the layout is rendered (defaults to false). If there is a significant amount of content or
-a lot of heavy controls being rendered into panels that are not displayed by default, setting this to
-true might improve performance. | CardLayout | |
extraCls : String An optional extra CSS class that will be added to the container. This can be useful for adding
-customized styles to t... An optional extra CSS class that will be added to the container. This can be useful for adding -customized styles to the container or any of its children using standard CSS rules. See -Ext.Component.ctCls also. -Note: extraCls defaults to '' except for the following classes -which assign a value by default: -
- | ContainerLayout | |
layoutOnCardChange : Boolean True to force a layout of the active item when the active card is changed. Defaults to false. | CardLayout |
Property | Defined By | |
---|---|---|
activeItem : Ext.Component A reference to the Ext.Component that is active. For example, if(myPanel.layout.activeItem.id == 'item-1') { ... }
-a... A reference to the Ext.Component that is active. For example,
-activeItem only applies to layout styles that can display items one at a time
-(like Ext.layout.AccordionLayout, Ext.layout.CardLayout
-and Ext.layout.FitLayout). Read-only. Related to Ext.Container.activeItem. | ContainerLayout | |
fieldTpl : Ext.Template The Ext.Template used by Field rendering layout classes (such as
-Ext.layout.FormLayout) to create the DOM structure o... The Ext.Template used by Field rendering layout classes (such as
-Ext.layout.FormLayout) to create the DOM structure of a fully wrapped,
-labeled and styled form Field. A default Template is supplied, but this may be
-overriden to create custom field structures. The template processes values returned from
-Ext.layout.FormLayout.getTemplateArgs. | ContainerLayout |
Method | Defined By | |
---|---|---|
setActiveItem( String/Number item )
- :
- voidSets the active (visible) item in the layout. Sets the active (visible) item in the layout. Parameters:
| CardLayout |