extjs table布局
extjs table布局Ext.layout.TableLayout对应面板布局layout，配置项的名称为table。这种比较允许你非常容易的渲染内容到HTML表格中，可以指定列数（columns），跨行（rowspan），跨列（colspan），可以创建出复杂的表格布局。必须使用layoutConfig属性来指定属于此布局的配置，table布局仅有唯一的布局配置项columns，而包含在其中的子面板会具有rowspan和colspan两个配置项！
在layoutConfi中我们无需指定有几行，只要指定由几列就可以了，有几行往下写几行就可了。另外一点就是对于合并行列的时候记得指明高和宽否则可能出现你合并的行跟未合并的单元格一样高的情况。同Ext中多数布局一样也是在父容器指定对应的布局为"table"，然后子容器设置对应的参数（对table布局就是colspan等）。
一、Table布局实例
new Ext.Panel({
id:'pn',
title:"新闻",
renderTo:"liPanel",
width:800,
height:500,
layout:"table",
bodyStyle:'padding:10 10 10 10',
layoutConfig:{
columns:2
},
defaults:{
height:220,
width:380,
frame:true
},
items:[
{
title:'国际',
html:"第一个子panel(行：1,列：1)",
bodyStyle:'padding:20'
},
{
title:'国内',
html:"第一个子panel(行：1,列：1)",
bodyStyle:'padding:20'
},
{
title:'新闻组图',
colspan:2,
html:"第一个子panel(行：1,列：1)",
bodyStyle:'padding:20;',
width:770
}
]
});
附加的CSS样式为：
#pn td
{
padding:5px;
}
效果：
实例二：
<script type="text/javascript">
Ext.onReady(function(){
Ext.create('Ext.panel.Panel',{
title:'Ext.layout.container.Table布局示例',
layout:{
type:'table',//表格布局
columns:4 //设置表格布局默认列数为4列
},
frame:true,
height:250,
width:310,
renderTo:Ext.getBody(),
defaults:{
bodyStyle:'background-color:#FFFFFF;',
frame:true,
width:60,
height:50
},
items:[{
title:'子面板一',
width:220,
colspan:3
},{
title:'子面板二',
rowspan:2,
height:100
},{title:'子面板三'},{title:'子面板四'},{title:'子面板五'}]
});
});
</script>
效果图：