Ext3.2 布局——table layout

tablelayout 并不是很常用，不过也需要知道怎么回事。API上是如此的描述：

此布局允许你方便地向一个HTML表格中渲染内容。 可以指定列总数，并且可以用rowspan和colspan来在表格内部创建 复杂的布局。

 在TableLayout的情况下，唯一合法的配置参数是 columns。 但是，添加到TableLayout中的项目可以提供如下表格-特定的配置参数:

• rowspan 应用到包含项目的表格单元上。
• colspan 应用到包含项目的表格单元上。
• cellId 一个id，应用到包含项目的表格单元上。
• cellCls 一个CSS类名，添加到包含项目的表格单元上。

同时，可以为子元素添加默认值。如以下代码中的default设置。

Ext.onReady(function() {
			Ext.QuickTips.init();
			new Ext.Panel({
						renderTo : "da",
						frame : true,
						layout : "table",
						layoutConfig : {
							columns : 4
						},
						title : "表格布局（TableLayout）",
						width : 500,
						height : 200,
						defaults : {
							bodyStyle : "padding:5px; background-color: #F00FFF;",
							frame : true,
							height : 60
						},
						items : [ {
									title : "嵌套面板1",
									// html : "嵌套面板1",
									colspan : 3
								}, {
									title : "嵌套面板2",
									html : "嵌套面板2",
									rowspan : 2,
									height : 125,
									width : 200
								}, {
									title : "嵌套面板3",
									html : "嵌套面板3"
								}, {
									title : "嵌套面板4",
									html : "嵌套面板4"
								}, {
									title : "嵌套面板5",
									html : "嵌套面板5"
								}]
					});
		});

但是在tablelayout中，指定colspan，宽度会自动横跨，但是指定rowspan的时候，高度并不会自动纵跨。这点与传统上的表格不相同。如下代码所示。

Ext.onReady(function() {
	Ext.QuickTips.init();
	var panel = new Ext.Panel({
				renderTo : 'da',
				title : 'Table Layout',
				layout : 'table',
				defaults : {
					// applied to each contained panel
					bodyStyle : 'padding:20px'
				},
				cls : 'x-table-layout-cell-top-align',
				layoutConfig : {
					// The total column count must be specified here
					columns : 3
				},
				// tdAttrs : {
				// valign : 'top'
				// },
				items : [{
							xtype : 'panel',
							rowspan : 2,
							title : 'CellA'

						}, {
							html : '<p>Cell B content</p>',
							colspan : 2
						}, {
							html : '<p>Cell C content</p>',
							cellCls : 'highlight'
						}, {
							html : '<p>Cell D content</p>'
						}]

			});
		
	});

这个时候，如果需要调整高度的话，一般要先算清高度大概多少，然后通过在对应的子元素中，使用height来设置该部分的高度。另外，如果要设置上对齐的话，需要通过css来实现。如上代码中的cls，需要对应的css样式。

<style>
.x-table-layout-cell-top-align td.x-table-layout-cell {
	vertical-align: top;
}
</style>