Hierarchy
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()
- });
-Config Options
CSS Class configs
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.
- - - -Other Configs
Flag to notify the ownerCt Component on afterLayout of a change
-Flag to notify the ownerCt Component on afterLayout of a change
-Flag to notify the ownerCt Container on afterLayout of a change
-Flag to notify the ownerCt Container on afterLayout of a change
-The total number of columns to create in the table for this layout. If not specified, all Components added to -this layout will be rendered into a single row using one column per Component.
-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.
- - - -An object containing properties which are added to the DomHelper specification -used to create the layout's <table> element. Example:
- - -{
- xtype: 'panel',
- layout: {
- type: 'table',
- columns: 3,
- tableAttrs: {
- style: {
- width: '100%'
- }
- }
- }
-}Methods
Returns an array of child components either for a render phase (Performed in the beforeLayout method of the layout's -base class), or the layout phase (onLayout).
- -Returns
- Array
of child components
-
Returns the element into which rendering must take place. Defaults to the owner Container's Ext.AbstractComponent.targetEl.
- - -May be overridden in layout managers which implement an inner element.
-Returns
- Ext.core.Element -