Ext.layout.container.Table

Alternate names
Ext.layout.TableLayout
Hierarchy
Ext.BaseExt.layout.LayoutExt.layout.container.ContainerExt.layout.container.Table
Inherited mixins
Ext.util.ElementContainer
Files
Table.js

此布局允许你很轻松的将内容渲染到一个HTML的table中. 可以指定列数, 也能够使用rowspan和colspan参数来创建复杂的布局. 此类应该通过 layout: {type: 'table'} Ext.container.Container.layout 属性进行扩展或创建, 通常应该不需要通过类名关键字进行直接创建.

注意: 当使用参数创建布局时, 布局的专用属性必须通过Ext.container.Container.layout对象来传递, 此对象会被应用到布局内部. 对于TableLayout来说, 唯一有效的参数只有 columns 和 tableAttrs. 但是, 所有添加到此布局下的子项可以支持以下几个布局专用属性:

rowspan 应用到包含此子项的table单元格.
colspan 应用到包含此子项的table单元格.
cellId 一个ID添加到包含此子项的table单元格上.
cellCls 一个CSS class名称添加到包含此子项的table单元格上.

创建一个TableLayout的概念与创建一个HTML的table非常相似. 你可以很容易的添加各个面板(或称为'cell'单元格), 为它们指定一些夸格参数如rowspan和colspan, 然后它们的作用就会如同在HTML中的一样. 你可以很容易的定义总列数, 然后按照自然顺序从左至右, 从上至下地添加各个子面板. 布局将会自动的根据列数, rowspan和colspan等参数计算出如何在table中放置这些面板. 和HTML中的table一样, 你的rowspan和colspan参数值之和必须在整个布局正确, 否则你将出现缺失/多出单元格的情况! 用例如下:

Ext.create('Ext.panel.Panel', {
    title: 'Table Layout',
    width: 300,
    height: 150,
    layout: {
        type: 'table',
        // The total column count must be specified here
        columns: 3
    },
    defaults: {
        // applied to each contained panel
        bodyStyle: 'padding:20px'
    },
    items: [{
        html: 'Cell A content',
        rowspan: 2
    },{
        html: 'Cell B content',
        colspan: 2
    },{
        html: 'Cell C content',
        cellCls: 'highlight'
    },{
        html: 'Cell D content'
    }],
    renderTo: Ext.getBody()
});

Defined By

Config options

Ext.layout.container.Table

columns : Number

此列表布局中列的总数. 如果不明确指定, 所有被添加到此布局的组件将被放置到一行中, 每个组件占一列.

Ext.layout.container.Container

itemCls : String

一个可选的添加到容器上的CSS class扩展类名. 此属性用于为容器或所有子组件添加基于CSS规则的自定义样式. 也可参考Ext.Component.componentCls

Ext.layout.container.Container

manageOverflow : Number

允许一下有效值: 0 布局忽略溢出. ...

允许一下有效值:

0 布局忽略溢出.
1 当需要滚动条时, 布局将被重新执行.
2 当出现溢出时, 布局将修正padding值.

Defaults to: 0

Ext.layout.container.Container

reserveScrollbar : Boolean

设此值为true时, 无论垂直滚动条是否需要出现, 都会在页面为垂直滚动条预留出空间(如果该操作系统下的滚动条需要占用空间).

在某些系统实例中, 容器内容的高度会随着系统的操作发生变化, 而此时你又不希望所有子组件的宽度因滚动条的出现和消失而来回改变, 这种情况下此属性会变得很有用. 滚动条将会在预留的空间出现, 子组件的宽度也不会发生改变.

Ext.define('Employee', {
    extend: 'Ext.data.Model',
    fields: [
       {name: 'rating', type: 'int'},
       {name: 'salary', type: 'float'},
       {name: 'name'}
    ]
});

function createFakeData(count) {
    var firstNames   = ['Ed', 'Tommy', 'Aaron', 'Abe', 'Jamie', 'Adam', 'Dave', 'David', 'Jay', 'Nicolas', 'Nige'],
        lastNames    = ['Spencer', 'Maintz', 'Conran', 'Elias', 'Avins', 'Mishcon', 'Kaneda', 'Davis', 'Robinson', 'Ferrero', 'White'],
        ratings      = [1, 2, 3, 4, 5],
        salaries     = [100, 400, 900, 1500, 1000000];

    var data = [];
    for (var i = 0; i < (count || 25); i++) {
        var ratingId    = Math.floor(Math.random() * ratings.length),
            salaryId    = Math.floor(Math.random() * salaries.length),
            firstNameId = Math.floor(Math.random() * firstNames.length),
            lastNameId  = Math.floor(Math.random() * lastNames.length),

            rating      = ratings[ratingId],
            salary      = salaries[salaryId],
            name        = Ext.String.format("{0} {1}", firstNames[firstNameId], lastNames[lastNameId]);

        data.push({
            rating: rating,
            salary: salary,
            name: name
        });
    }
    store.loadData(data);
}

// create the Data Store
var store = Ext.create('Ext.data.Store', {
    id: 'store',
    model: 'Employee',
    proxy: {
        type: 'memory'
    }
});
createFakeData(10);

var grid = Ext.create('Ext.grid.Panel', {
    title: 'Grid loaded with varying number of records',
    anchor: '100%',
    store: store,
    columns: [{
        xtype: 'rownumberer',
        width: 40,
        sortable: false
    },{
        text: 'Name',
        flex: 1,
        sortable: true,
        dataIndex: 'name'
    },{
        text: 'Rating',
        width: 125,
        sortable: true,
        dataIndex: 'rating'
    },{
        text: 'Salary',
        width: 125,
        sortable: true,
        dataIndex: 'salary',
        align: 'right',
        renderer: Ext.util.Format.usMoney
    }]
});

Ext.create('Ext.panel.Panel', {
    renderTo: document.body,
    width: 800,
    height: 600,
    layout: {
        type: 'anchor',
        reserveScrollbar: true // There will be a gap even when there's no scrollbar
    },
    autoScroll: true,
    items: grid,
    tbar: {
        defaults: {
            handler: function(b) {
                createFakeData(b.count);
            }
        },
        items: [{
             text: '10 Items',
             count: 10
        },{
             text: '100 Items',
             count: 100
        },{
             text: '300 Items',
             count: 300
        },{
             text: '1000 Items',
             count: 1000
        },{
             text: '5000 Items',
             count: 5000
        }]
    }
});

Defaults to: false

Ext.layout.container.Table

tableAttrs : Object

一个用来创建布局的'

'元素的属性对象, 此对象将被添加到DomHelper. 示例:

{
    xtype: 'panel',
    layout: {
        type: 'table',
        columns: 3,
        tableAttrs: {
            style: {
                width: '100%'
            }
        }
    }
}

Defaults to: null

Ext.layout.container.Table

tdAttrs : Object

一个用来创建布局的'

'元素的属性对象, 此对象将被添加到DomHelper.

一个用来创建布局的'

'元素的属性对象, 此对象将被添加到DomHelper.

Defined By

Ext.layout.container.Table

Alternate names

Hierarchy

Inherited mixins

Files

Config options

Properties

Methods

Instance Methods

Parameters

Parameters

Parameters

Parameters

Parameters

Parameters

Parameters

Parameters

Parameters

Parameters

Returns

Parameters

Parameters

Returns

Parameters

Returns

Parameters

Parameters

Parameters

Parameters

Parameters

Parameters

Parameters

Parameters

Returns

Returns

Parameters

Parameters

Returns

Returns

Returns

Returns

Returns

Returns

Parameters

Parameters

Returns

Parameters

Parameters

Parameters

Parameters

Parameters

Returns

Parameters

Parameters

Parameters

Parameters

Parameters

Returns

Static Methods

Parameters

Parameters

Returns

Parameters

Returns

Returns

Parameters

Returns

Parameters

Returns