PropertiesMethodsEventsConfig OptionsDirect Link

Class Ext.layout.TableLayout

Defined In: TableLayout.js
Class: Ext.layout.TableLayout
Extends: Ext.layout.ContainerLayout

这种布局可以让你把内容轻易地渲染到一个HTML表格。 可指定列的总数,而跨行(rowspan)与跨列(colspan)就用于创建表格复杂的布局。 应通过继承此类或设置Ext.Container#layout的配置layout:'table' 的方式创建,一般很少通过关键字new直接使用。

注意必须通过Ext.Container#layoutConfig属性对象来指定属于此布局的配置,以便传入到layout的内部。 对于TableLayout而言,只有一个配置项属性就是#columns, 不过在TableLayout下面的子项就有的针对该布局的配置项:rowspancolspan,下面会进行解释。

构建一个TableLayout布局的基本概念与构建一个标准HTML表格在原理上非常相似。 加入子面板时,无论使用哪一种的方式(指定属性rowspan或colspan)进行跨单元格处理时,都与HTML相同。 比较起在HTML中创建何嵌套行或列,这种方式显得更为简单。你只需在layoutConfig中指定好列的数量 跟着按照正常的顺序从左到右,由上到下地加入面板,布局就会自动计算相应的列数、是否跨行,跨列和怎么在单元格内定位。 与HTML表格的要求差不多,必须从整体布局上正确设置好rowspans和colspans,否则表格不能补全或突出多余的单元格。用法举例:


// This code will generate a layout table that is 3 columns by 2 rows
// with some spanning included.  The basic layout will be:
// +--------+-----------------+
// |   A    |   B             |
// |        |--------+--------|
// |        |   C    |   D    |
// +--------+--------+--------+
var table = new Ext.Panel({
    title: 'Table Layout',
    layout:'table',
    defaults: {
        // applied to each contained panel
        bodyStyle:'padding:20px'
    },
    layoutConfig: {
        // The total column count must be specified here
        columns: 3
    },
    items: [{
        html: '<p>Cell A content</p>',
        rowspan: 2
    },{
        html: '<p>Cell B content</p>',
        colspan: 2
    },{
        html: '<p>Cell C content</p>'
    },{
        html: '<p>Cell D content</p>'
    }]
});

配置项

配置项 定义者

公告属性

属性 定义者

公共方法

方法 定义者

公告事件

这个类没公共的事件。