X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/6e39d509471fe9b4e2660e0d1631b350d0c66f40..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/docs/output/Ext.layout.TableLayout.html diff --git a/docs/output/Ext.layout.TableLayout.html b/docs/output/Ext.layout.TableLayout.html deleted file mode 100644 index 80633aa4..00000000 --- a/docs/output/Ext.layout.TableLayout.html +++ /dev/null @@ -1,86 +0,0 @@ -
ContainerLayout 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 | Defined By | |
---|---|---|
columns : Number The total number of columns to create in the table for this layout. If not specified, all Components added to
-this ... 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. | TableLayout | |
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 | |
renderHidden : Boolean True to hide each contained item on render (defaults to false). | ContainerLayout | |
tableAttrs : Object An object containing properties which are added to the DomHelper specification
-used to create the layout's <table... An object containing properties which are added to the DomHelper specification -used to create the layout's <table> element. Example:
| TableLayout |
Property | Defined By | |
---|---|---|
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 |