Clear Up
SharpKit Reference

Ext.layout.container Namespace

Download SDK: SharpKit.ExtJs.zip

Classes

Name Description
Absolute

This is a layout that inherits the anchoring of Ext.layout.container.Anchor and adds the ability for x/y positioning using the standard x and y component config options.

This class is intended to be extended or created via the layout configuration property. See Ext.container.Container.layout for additional details.

  
    Ext.create('Ext.form.Panel', {
            title: 'Absolute Layout',
            width: 300,
            height: 275,
            layout: {
            type: 'absolute'
            // layout-specific configs go here
            //itemCls: 'x-abs-layout-item',
            },
            url:'save-form.php',
            defaultType: 'textfield',
            items: [{
            x: 10,
            y: 10,
            xtype:'label',
            text: 'Send To:'
            },{
            x: 80,
            y: 10,
            name: 'to',
            anchor:'90%'  // anchor width by percentage
            },{
            x: 10,
            y: 40,
            xtype:'label',
            text: 'Subject:'
            },{
            x: 80,
            y: 40,
            name: 'subject',
            anchor: '90%'  // anchor width by percentage
            },{
            x:0,
            y: 80,
            xtype: 'textareafield',
            name: 'msg',
            anchor: '100% 100%'  // anchor width and height
            }],
            renderTo: Ext.getBody()
            });
            
AbsoluteConfig
AbsoluteEvents
Accordion

This is a layout that manages multiple Panels in an expandable accordion style such that by default only one Panel can be expanded at any given time (set multi config to have more open). Each Panel has built-in support for expanding and collapsing.

Note: Only Ext Panels and all subclasses of Ext.panel.Panel may be used in an accordion layout Container.

  
    Ext.create('Ext.panel.Panel', {
            title: 'Accordion Layout',
            width: 300,
            height: 300,
            defaults: {
            // applied to each contained panel
            bodyStyle: 'padding:15px'
            },
            layout: {
            // layout-specific configs go here
            type: 'accordion',
            titleCollapse: false,
            animate: true,
            activeOnTop: true
            },
            items: [{
            title: 'Panel 1',
            html: 'Panel content!'
            },{
            title: 'Panel 2',
            html: 'Panel content!'
            },{
            title: 'Panel 3',
            html: 'Panel content!'
            }],
            renderTo: Ext.getBody()
            });
            
AccordionConfig
AccordionEvents
Anchor

This is a layout that enables anchoring of contained elements relative to the container's dimensions. If the container is resized, all anchored items are automatically rerendered according to their anchor rules.

This class is intended to be extended or created via the layout: 'anchor' config, and should generally not need to be created directly via the new keyword.

AnchorLayout does not have any direct config options (other than inherited ones). By default, AnchorLayout will calculate anchor measurements based on the size of the container itself. However, the container using the AnchorLayout can supply an anchoring-specific config property of anchorSize.

If anchorSize is specifed, the layout will use it as a virtual container for the purposes of calculating anchor measurements based on it instead, allowing the container to be sized independently of the anchoring logic if necessary.

  
    Ext.create('Ext.Panel', {
            width: 500,
            height: 400,
            title: "AnchorLayout Panel",
            layout: 'anchor',
            renderTo: Ext.getBody(),
            items: [
            {
            xtype: 'panel',
            title: '75% Width and 20% Height',
            anchor: '75% 20%'
            },
            {
            xtype: 'panel',
            title: 'Offset -300 Width & -200 Height',
            anchor: '-300 -200'
            },
            {
            xtype: 'panel',
            title: 'Mixed Offset and Percent',
            anchor: '-250 20%'
            }
            ]
            });
            
AnchorConfig
AnchorEvents
Auto

The AutoLayout is the default layout manager delegated by Ext.container.Container to render any child Components when no layout is configured into a Container. AutoLayout provides only a passthrough of any layout calls to any child containers.

  
    Ext.create('Ext.Panel', {
            width: 500,
            height: 280,
            title: "AutoLayout Panel",
            layout: 'auto',
            renderTo: document.body,
            items: [{
            xtype: 'panel',
            title: 'Top Inner Panel',
            width: '75%',
            height: 90
            },
            {
            xtype: 'panel',
            title: 'Bottom Inner Panel',
            width: '75%',
            height: 90
            }]
            });
            
AutoConfig
AutoEvents
Border

This is a multi-pane, application-oriented UI layout style that supports multiple nested panels, automatic bars between regions and built-in expanding and collapsing of regions.

This class is intended to be extended or created via the layout:'border'Ext.container.Container.layout config, and should generally not need to be created directly via the new keyword.

  
    Ext.create('Ext.panel.Panel', {
            width: 500,
            height: 300,
            title: 'Border Layout',
            layout: 'border',
            items: [{
            title: 'South Region is resizable',
            region: 'south',     // position for region
            xtype: 'panel',
            height: 100,
            split: true,         // enable resizing
            margins: '0 5 5 5'
            },{
            // xtype: 'panel' implied by default
            title: 'West Region is collapsible',
            region:'west',
            xtype: 'panel',
            margins: '5 0 0 5',
            width: 200,
            collapsible: true,   // make collapsible
            id: 'west-region-container',
            layout: 'fit'
            },{
            title: 'Center Region',
            region: 'center',     // center region is required, no width/height specified
            xtype: 'panel',
            layout: 'fit',
            margins: '5 5 0 0'
            }],
            renderTo: Ext.getBody()
            });
            

Notes

  • When using the split option, the layout will automatically insert a Ext.resizer.Splitter into the appropriate place. This will modify the underlying items collection in the container.

  • Any Container using the Border layout must have a child item with region:'center'. The child item in the center region will always be resized to fill the remaining space not used by the other regions in the layout.

  • Any child items with a region of west or east may be configured with either an initial width, or a Ext.layout.container.Box.flex value, or an initial percentage width string (Which is simply divided by 100 and used as a flex value). The 'center' region has a flex value of 1.

  • Any child items with a region of north or south may be configured with either an initial height, or a Ext.layout.container.Box.flex value, or an initial percentage height string (Which is simply divided by 100 and used as a flex value). The 'center' region has a flex value of 1.

  • There is no BorderLayout.Region class in ExtJS 4.0+

BorderConfig
BorderEvents
Box

Base Class for HBoxLayout and VBoxLayout Classes. Generally it should not need to be used directly.

BoxConfig
BoxEvents
Card

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.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 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:

  
var p = 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.

  
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()
            });
            
CardConfig
CardEvents
CheckboxGroup

This layout implements the column arrangement for Ext.form.CheckboxGroup and Ext.form.RadioGroup. It groups the component's sub-items into columns based on the component's columns and Ext.form.CheckboxGroup.vertical config properties.

CheckboxGroupConfig
CheckboxGroupEvents
Column

This is the layout style of choice for creating structural layouts in a multi-column format where the width of each column can be specified as a percentage or fixed width, but the height is allowed to vary based on the content. This class is intended to be extended or created via the layout:'column' Ext.container.Container.layout config, and should generally not need to be created directly via the new keyword.

ColumnLayout does not have any direct config options (other than inherited ones), but it does support a specific config property of columnWidth that can be included in the config of any panel added to it. The layout will use the columnWidth (if present) or width of each panel during layout to determine how to size each panel. If width or columnWidth is not specified for a given panel, its width will default to the panel's width (or auto).

The width property is always evaluated as pixels, and must be a number greater than or equal to 1. The columnWidth property is always evaluated as a percentage, and must be a decimal value greater than 0 and less than 1 (e.g., .25).

The basic rules for specifying column widths are pretty simple. The logic makes two passes through the set of contained panels. During the first layout pass, all panels that either have a fixed width or none specified (auto) are skipped, but their widths are subtracted from the overall container width.

During the second pass, all panels with columnWidths are assigned pixel widths in proportion to their percentages based on the total remaining container width. In other words, percentage width panels are designed to fill the space left over by all the fixed-width and/or auto-width panels. Because of this, while you can specify any number of columns with different percentages, the columnWidths must always add up to 1 (or 100%) when added together, otherwise your layout may not render as expected.

  
// All columns are percentages -- they must add up to 1
            Ext.create('Ext.panel.Panel', {
            title: 'Column Layout - Percentage Only',
            width: 350,
            height: 250,
            layout:'column',
            items: [{
            title: 'Column 1',
            columnWidth: 0.25
            },{
            title: 'Column 2',
            columnWidth: 0.55
            },{
            title: 'Column 3',
            columnWidth: 0.20
            }],
            renderTo: Ext.getBody()
            });
            // Mix of width and columnWidth -- all columnWidth values must add up
            // to 1. The first column will take up exactly 120px, and the last two
            // columns will fill the remaining container width.
            Ext.create('Ext.Panel', {
            title: 'Column Layout - Mixed',
            width: 350,
            height: 250,
            layout:'column',
            items: [{
            title: 'Column 1',
            width: 120
            },{
            title: 'Column 2',
            columnWidth: 0.7
            },{
            title: 'Column 3',
            columnWidth: 0.3
            }],
            renderTo: Ext.getBody()
            });
            
ColumnConfig
ColumnEvents
Container

This class is intended to be extended or created via the layout configuration property. See Ext.container.Container.layout for additional details.

ContainerConfig
ContainerEvents
Editor

NOTE This is a private utility class for internal use by the framework. Don't rely on its existence.

Component layout for editors

EditorConfig
EditorEvents
Fit

This is a base class for layouts that contain a single item that automatically expands to fill the layout's container. This class is intended to be extended or created via the layout:'fit' Ext.container.Container.layout config, and should generally not need to be created directly via the new keyword.

Fit layout does not have any direct config options (other than inherited ones). To fit a panel to a container using Fit layout, simply set layout: 'fit' on the container and add a single panel to it.

  
    Ext.create('Ext.panel.Panel', {
            title: 'Fit Layout',
            width: 300,
            height: 150,
            layout:'fit',
            items: {
            title: 'Inner Panel',
            html: 'This is the inner panel content',
            bodyPadding: 20,
            border: false
            },
            renderTo: Ext.getBody()
            });
            

If the container has multiple items, all of the items will all be equally sized. This is usually not desired, so to avoid this, place only a single item in the container. This sizing of all items can be used to provide a background image that is "behind" another item such as a dataview if you also absolutely position the items.

FitConfig
FitEvents
Form

This is a layout that will render form Fields, one under the other all stretched to the Container width.

  
    Ext.create('Ext.Panel', {
            width: 500,
            height: 300,
            title: "FormLayout Panel",
            layout: 'form',
            renderTo: Ext.getBody(),
            bodyPadding: 5,
            defaultType: 'textfield',
            items: [{
            fieldLabel: 'First Name',
            name: 'first',
            allowBlank:false
            },{
            fieldLabel: 'Last Name',
            name: 'last'
            },{
            fieldLabel: 'Company',
            name: 'company'
            }, {
            fieldLabel: 'Email',
            name: 'email',
            vtype:'email'
            }, {
            fieldLabel: 'DOB',
            name: 'dob',
            xtype: 'datefield'
            }, {
            fieldLabel: 'Age',
            name: 'age',
            xtype: 'numberfield',
            minValue: 0,
            maxValue: 100
            }, {
            xtype: 'timefield',
            fieldLabel: 'Time',
            name: 'time',
            minValue: '8:00am',
            maxValue: '6:00pm'
            }]
            });
            

Note that any configured padding will be ignored on items within a Form layout.

FormConfig
FormEvents
HBox

A layout that arranges items horizontally across a Container. This layout optionally divides available horizontal space between child items containing a numeric flex configuration.

This layout may also be used to set the heights of child items by configuring it with the align option.

  
    Ext.create('Ext.Panel', {
            width: 500,
            height: 300,
            title: "HBoxLayout Panel",
            layout: {
            type: 'hbox',
            align: 'stretch'
            },
            renderTo: document.body,
            items: [{
            xtype: 'panel',
            title: 'Inner Panel One',
            flex: 2
            },{
            xtype: 'panel',
            title: 'Inner Panel Two',
            flex: 1
            },{
            xtype: 'panel',
            title: 'Inner Panel Three',
            flex: 1
            }]
            });
            
HBoxConfig
HBoxEvents
Table

This layout allows you to easily render content into an HTML table. The total number of columns can be specified, and rowspan and colspan can be used to create complex layouts within the table. This class is intended to be extended or created via the layout: {type: 'table'}Ext.container.Container.layout config, and should generally not need to be created directly via the new keyword.

Note that when creating a layout via config, the layout-specific config properties must be passed in via the Ext.container.Container.layout object which will then be applied internally to the layout. In the case of TableLayout, the only valid layout config properties are columns and tableAttrs. However, the items added to a TableLayout can supply the following table-specific config properties:

  • rowspan Applied to the table cell containing the item.
  • colspan Applied to the table cell containing the item.
  • cellId An id applied to the table cell containing the item.
  • cellCls A CSS class name added to the table cell containing the item.

The basic concept of building up a TableLayout is conceptually very similar to building up a standard HTML table. You simply add each panel (or "cell") that you want to include along with any span attributes specified as the special config properties of rowspan and colspan which work exactly like their HTML counterparts. Rather than explicitly creating and nesting rows and columns as you would in HTML, you simply specify the total column count in the layout config and start adding panels in their natural order from left to right, top to bottom. The layout will automatically figure out, based on the column count, rowspans and colspans, how to position each panel within the table. Just like with HTML tables, your rowspans and colspans must add up correctly in your overall layout or you'll end up with missing and/or extra cells! Example usage:

  
    Ext.create('Ext.panel.Panel', {
            title: 'Table Layout',
            width: 300,
            height: 150,
            layout: {
            type: 'table',
            // The total column count must be specified here
            columns: 3
            },
            defaults: {
            // applied to each contained panel
            bodyStyle: 'padding:20px'
            },
            items: [{
            html: 'Cell A content',
            rowspan: 2
            },{
            html: 'Cell B content',
            colspan: 2
            },{
            html: 'Cell C content',
            cellCls: 'highlight'
            },{
            html: 'Cell D content'
            }],
            renderTo: Ext.getBody()
            });
            
TableConfig
TableEvents
VBox

A layout that arranges items vertically down a Container. This layout optionally divides available vertical space between child items containing a numeric flex configuration.

This layout may also be used to set the widths of child items by configuring it with the align option.

  
    Ext.create('Ext.Panel', {
            width: 500,
            height: 400,
            title: "VBoxLayout Panel",
            layout: {
            type: 'vbox',
            align: 'center'
            },
            renderTo: document.body,
            items: [{
            xtype: 'panel',
            title: 'Inner Panel One',
            width: 250,
            flex: 2
            },
            {
            xtype: 'panel',
            title: 'Inner Panel Two',
            width: 250,
            flex: 4
            },
            {
            xtype: 'panel',
            title: 'Inner Panel Three',
            width: '50%',
            flex: 4
            }]
            });
            
VBoxConfig
VBoxEvents
© Copyright 2005-2011 SharpKit. All rights reserved.