table布局有类Ext.layout定义,名称为table,该布局负责把容器中的子元素安卓类似普通的html标签
代码示例:
< script type = "text/javascript" >
Ext.onReady( function (){
new Ext.Panel({
title: "According容器" ,
renderTo: "btn" ,
width:400,
height:200,
layout: "table" ,
hideLabels: false ,
layoutConfig:{
columns:3
},
items:[
{title: "子元素1" ,html: "这是子元素1的内容" ,rowspan:2,height:100},
{title: "子元素2" ,html: "这是子元素2的内容" ,colspan:2},
{title: "子元素3" ,html: "这是子元素3的内容" },
{title: "子元素4" ,html: "这是子元素4的内容" },
]
});
}); </ script >
指定了table布局;layoutConfig使用columns指定父容器分成3列,子元素中使用rowspans和colspan来指定子元素横跨的单元格数效果:
![26113756-028e10c7ec3d4cc9b7eb1cca41812456.png](https://i-blog.csdnimg.cn/blog_migrate/78be8c7fbaed337c398b4753b582f5df.png)
如果不添加任何的rolspan和colspan那么:
![26113756-7512aa2e0d504521b44dafaa1c6a6599.png](https://i-blog.csdnimg.cn/blog_migrate/bfb49a1df0bf1248300456b3b17eaf96.png)
如果是: {title:"子元素1",html:"这是子元素1的内容",colspan:2},
那么有:
![26113756-0f212f333bd74ab592102367b5f0a9b6.png](https://i-blog.csdnimg.cn/blog_migrate/7b972920272d9754e763526754cde1f2.png)
如果是:{title:"子元素1",html:"这是子元素1的内容",rowspan:2},
![26113756-3d3e965e72e84162877a7f5a677d6785.png](https://i-blog.csdnimg.cn/blog_migrate/0257babd45a186bc84af2e2c50b673fe.png)
如果是: {title:"子元素2",html:"这是子元素2的内容",rowspan:2},
![26113757-a5b8a29722444182b21382890439361c.png](https://i-blog.csdnimg.cn/blog_migrate/f29df3af51842912d1a43ae53ba03571.png)