Table 布局由类Ext.layout.TableLayout 定义.称为table,该布局负责把容器中的子元素按照类似普通html标签

(除了上述讲的这几种布局以外,还有fit 布局,form布局,accordion布局,card布局)

var panel4 = new Ext.Panel({

renderTo:Ext.getBody(),
title:'容器组件',
height:200,
width:500,
layout:{
 columns:3,
 type:'table'
},
items:[{
title:'子元素1',
html:'这是子元素1中的内容',
rowspan:2,
height:100
},{
title:'子元素2',
html:'这是子元素2中的内容',
colspan:2
},{
title:'子元素3',
html:'子元素3中的内容'
},{
title:'子元素4',
html:'这是子元素4中的内容'
}]

});

var panel5 =  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:'子面板五'}]    
    });