Question

我有一个Ext.JS项目，其中我有两个具有不同列数的单独表 - 一个表有10列，另一个表有11列。两个表都需要完全相同的宽度 - 单元格需要自动调整大小以适应。

我可以通过调整单个单元格的大小来使它们非常接近......

var table1 = new Ext.Panel({
    renderTo: Ext.getBody(),
    layout:'table',
    width: '1000',
    layoutConfig: {columns:10},
    // applied to child components
    defaults: {frame:false, width:100, height:25},

***etc***


var table2 = new Ext.Panel({
    baseCls:'x-plain',
    renderTo: Ext.getBody(),
    layout:'table',
    layoutConfig: {columns:11},
    width: '1000',
    // applied to child components
    defaults: {frame:false, width:91, height:25},

***etc***

但这并不准确。如果我从单个单元格中删除默认宽度，则单元格会缩小以占用尽可能少的空间。

任何建议（它都在IE平台上）。

提前致谢，添

PS：版本是3.3.0

Answer 1

如果我理解你的要求正确，请填写

flex: 1

进入所有列。 flex之后的数字表示您希望该列共享的总空间的比率。因此，如果您有两列并且您希望第一列占据空间的2 / 3rds而第二列占据1/3，则可以分别使用flex：2和flex：1。

在您的情况下，只需对所有10/11列使用flex：1，它应该均匀分布。

例如：

{
    header: 'Column 1',
    dataIndex: 'column1_data',
    flex: 1
}

编辑：请确保您尝试这样做，即可取出默认的宽度内容

在Ext.JS中，如何创建一个自动重新调整单元格大小以适应整体大小的表格？

1 个答案: