| 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下面的子项就有的针对该布局的配置项:rowspan和colspan,下面会进行解释。
构建一个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>'
}]
});
| 配置项 | 定义者 | |
|---|---|---|
|
columns
: Number
为此布局里面的表格指定一个要创建列的数量。
如不指定,所有加入到这个...
为此布局里面的表格指定一个要创建列的数量。
如不指定,所有加入到这个布局里的面板都会渲染单行单列的面板
|
TableLayout | |
|
CSS
: String
一个可选添加的CSS样式类,加入到组件的容器上(默认为'')。 这为容...
一个可选添加的CSS样式类,加入到组件的容器上(默认为'')。 这为容器或容器的子节点加入标准CSS规则提供了方便。
|
ContainerLayout | |
|
renderHidden
: Boolean
True表示为在渲染时隐藏包含的每一项(缺省为false)。
True表示为在渲染时隐藏包含的每一项(缺省为false)。
|
ContainerLayout | |
| 属性 | 定义者 | |
|---|---|---|
|
activeItem: activeItem
一个已激活Ext.Component的引用 例如,if(myPane...
一个已激活Ext.Component的引用 例如,if(myPanel.layout.activeItem.id == 'item-1') { ... }。 activeItem只会作用在布局样式上。(像Ext.layout.Accordion, Ext.layout.CardLayout和Ext.layout.FitLayout)。只读的。 Related to Ext.Container#activeItem.
|
ContainerLayout | |
| 方法 | 定义者 | |
|---|---|---|