|
|
Ext.layout.container Namespace
Download SDK: SharpKit.ExtJs.zip
Classes
|
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. Example usage: Ext.create('Ext.form.Panel', {
title: 'Absolute Layout',
width: 300,
height: 275,
layout:'absolute',
layoutConfig: {
// 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
|
|
|
|
AbstractCard
|
This layout manages multiple child Components, each is fit 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 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. Containers that are configured with a card layout will have a method setActiveItem dynamically added to it. var p = new Ext.panel.Panel({
fullscreen: true,
layout: 'card',
items: [{
html: 'Card 1'
},{
html: 'Card 2'
}]
});
p.setActiveItem(1);
|
|
|
AbstractCardConfig
|
|
|
|
AbstractCardEvents
|
|
|
|
AbstractContainer
|
Please refer to sub classes documentation
|
|
|
AbstractContainerConfig
|
|
|
|
AbstractContainerEvents
|
|
|
|
AbstractFit
|
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. FitLayout does not have any direct config options (other than inherited ones). To fit a panel to a container
using FitLayout, simply set layout:'fit' on the container and add a single panel to it. If the container has
multiple panels, only the first one will be displayed. Example usage: var p = new Ext.panel.Panel({
title: 'Fit Layout',
layout:'fit',
items: {
title: 'Inner Panel',
html: '<p>This is the inner panel content</p>',
border: false
}
});
|
|
|
AbstractFitConfig
|
|
|
|
AbstractFitEvents
|
|
|
|
Accordion
|
This is a layout that manages multiple Panels in an expandable accordion style such that only
one Panel can be expanded at any given time. 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. Example usage: Ext.create('Ext.panel.Panel', {
title: 'Accordion Layout',
width: 300,
height: 300,
layout:'accordion',
defaults: {
// applied to each contained panel
bodyStyle: 'padding:15px'
},
layoutConfig: {
// layout-specific configs go here
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' Ext.layout.container.AbstractContainer.layout
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. For example: 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.
Example usage: 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. Example usage: Ext.create('Ext.panel.Panel', {
width: 500,
height: 400,
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: 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. The regions of a BorderLayout are fixed at render time and thereafter, its child Components may not be removed or added.To add/remove
Components within a BorderLayout, have them wrapped by an additional Container which is directly
managed by the BorderLayout. If the region is to be collapsible, the Container used directly
by the BorderLayout manager should be a Panel. In the following example a Container (an Ext.panel.Panel)
is added to the west region:
wrc = Ext.getCmp('west-region-container');
wrc.removeAll();
wrc.add({
title: 'Added Panel',
html: 'Some content'
});
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 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. 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 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',
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: 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.
Example usage: // 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: .25
},{
title: 'Column 2',
columnWidth: .55
},{
title: 'Column 3',
columnWidth: .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: .7
},{
title: 'Column 3',
columnWidth: .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
|
|
|
|
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. FitLayout does not have any direct config options (other than inherited ones). To fit a panel to a container
using FitLayout, simply set layout:'fit' on the container and add a single panel to it. If the container has
multiple panels, only the first one will be displayed.
Example usage: 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()
});
|
|
|
FitConfig
|
|
|
|
FitEvents
|
|
|
|
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.
Example usage: 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 layoutConfig 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: // This code will generate a layout table that is 3 columns by 2 rows
// with some spanning included. The basic layout will be:
// +--------+-----------------+
// | A | B |
// | |--------+--------|
// | | C | D |
// +--------+--------+--------+
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.
Example usage: 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
|
|
|
SharpKit.AspNetAjax
Ext