Ext布局之TableLayout表格布局实例

 Ext.layout.TableLayout对应面板布局layout配置项的名称为table。

       这种比较允许你非常容易的渲染内容到HTML表格中，可以指定列数（columns），跨行（rowspan），跨列（colspan），可以创建出复杂的表格布局。

        必须使用layoutConfig属性来指定属于此布局的配置，table布局仅有唯一的布局配置项columns，而包含在其中的子面板会具有rowspan和colspan两个配置项！

   下面是表格布局的一个简单的示例

<script type="text/javascript">
 Ext.onReady(function(){
  Ext.BLANK_IMAGE_URL = '../../extjs2.0/resources/images/default/s.gif';
  var panel = new Ext.Panel({
   title:'Ext.layout.TableLayout布局示例',
   layout : 'table',
   layoutConfig : {
    columns : 4 //设置表格布局默认列数为4列
   },
   frame:true,//渲染面板
   height : 150,
   applyTo :'panel',
   defaults : {//设置默认属性
    bodyStyle:'background-color:#FFFFFF;',//设置面板体的背景色
    frame : true,
    height : 50
   },
   items: [
    {
     title:'子面板一',
     colspan : 3   //设置跨列
    },
    {
     title:'子面板二',
     rowspan : 2,  //设置跨行
     height : 100
    },
    {title:'子面板三'},
    {title:'子面板四'},
    {title:'子面板五'}
   ]
  })
 });
</script>

代码演示了TableLayout（表格布局）的使用方式，其中子面板的colspan和rowspan配置项决定了它跨列和跨行的数量，另外需要指出的是，子面板在父面板中是从上到下由左至右进行顺序排列的。效果如图

图片1