我正在玩 Table Layout ExtJS 4.2.1。可以看到结果in this fiddle .
基本上我期望的是表格使用面板的 100% 宽度来正确应用 colspan。
此外,如果您使用 Firefox 查看它,它已损坏,那么也许我以错误的方式使用了此布局?
例子:
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 B content',
colspan: 2,
xtype: 'panel'
},{
html: 'Cell C content',
xtype: 'panel'
},{
html: 'Cell D content',
xtype: 'panel'
}],
renderTo: Ext.getBody()
});
最佳答案
ExtJS 表格布局应该像 HTML 表格一样工作。如果您使用上面提供的配置创建一个 HTML 表格,您会得到类似的结果。 (参见 http://jsfiddle.net/h6J3J/1/)
<table border="1">
<tr>
<td colspan="2">Cell B content</td>
<td>Cell C content</td>
</tr>
<tr>
<td>Cell D content</td>
</tr>
</table>
您看到的结果是因为第一行中的第一列(使用 colspan 2)在它下面的行中没有两列可以跨越。
要使表格成为面板宽度的 100%,您可以使用 tableAttrs 属性:
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.layout.container.Table-cfg-tableAttrs
layout: {
type: 'table',
columns: 3,
tableAttrs: {
style: {
width: '100%'
}
}
}
关于extjs - 表布局 : broken in Firefox & didn't use 100% width of panel?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18146584/