X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/c930e9176a5a85509c5b0230e2bff5c22a591432..0494b8d9b9bb03ab6c22b34dae81261e3cd7e3e6:/docs/output/Ext.layout.TableLayout.html?ds=sidebyside diff --git a/docs/output/Ext.layout.TableLayout.html b/docs/output/Ext.layout.TableLayout.html index caad8cbf..9b437c01 100644 --- a/docs/output/Ext.layout.TableLayout.html +++ b/docs/output/Ext.layout.TableLayout.html @@ -1,57 +1,58 @@ -
Properties Methods Events Config Options Direct Link 
ContainerLayout
  TableLayout

Class Ext.layout.TableLayout

Package:Ext.layout
Defined In:TableLayout.js
Class:TableLayout
Extends:ContainerLayout

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:'table' Ext.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.layoutConfig object which will then be applied internally to the layout. In the -case of TableLayout, the only valid layout config property is columns. However, the items added to a -TableLayout can supply the following table-specific config properties:

- -

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    |

-// +--------+--------+--------+

-var table = new Ext.Panel({
-    title: 'Table Layout',
-    layout:'table',
-    defaults: {
-        // applied to each contained panel

-        bodyStyle:'padding:20px'
-    },
-    layoutConfig: {
-        // The total column count must be specified here

-        columns: 3
-    },
-    items: [{
-        html: '<p>Cell A content</p>',
-        rowspan: 2
-    },{
-        html: '<p>Cell B content</p>',
-        colspan: 2
-    },{
-        html: '<p>Cell C content</p>',
-        cellCls: 'highlight'
-    },{
-        html: '<p>Cell D content</p>'
-    }]
-});

Config Options

Config OptionsDefined By

Public Methods

MethodDefined By

Public Events

This class has no public events.
\ No newline at end of file