我有一个Sencha Ext.js Gridpanel,最后一列中的文本超出了网格的边缘,知道为什么会这样吗?

pcrecxhr  于 2022-09-26  发布在  其他
关注(0)|答案(2)|浏览(152)

我有一个Sencha Ext.js Gridpanel,最后一列中的文本超出了网格的边缘。知道为什么会这样吗?最后一列(引用)也不可调整大小。我完全是ExtJS的新手。下面的屏幕截图。用蓝色标记的问题区域。

soat7uwm

soat7uwm1#

您可能已经为每个列设置了固定宽度?
在这种情况下,您可以将弹性值(例如1)设置为最后一列。
这样,列将占据右侧的“空闲”空间。
当然,您可以将flex值赋给任何其他列。在我看来,主要问题是“未使用”的空间。
下面是一个代码示例:

columns: [
    { text: 'First column', dataIndex: 'fc', width: 200 },
    { text: 'Second column', dataIndex: 'sc'; width: 50 },
    { text: 'Third column', dataIndex: 'tc', flex: 1 }
],
7eumitmz

7eumitmz2#

正如@KaMun建议的那样,您有一个未使用空间的问题!使用整个网格空间快速构建每个列宽度的一个好方法是列的flex配置。
对于我的网格,默认情况下,我喜欢通过在列的默认值中定义它来给每个列相同的“权重”(flex=1)。如果您确定某些列将始终具有相同的大小,则可以始终覆盖flex配置,指定列的宽度
在下一个示例中,最后一列的固定宽度为120,而其他两列将以50%-50%的方式划分剩余空间,因为它们共享相同的权重(flex=1):

columns: {    
    defaults: {
        flex: 1
    },        
    items: [
        { text: "First Name", dataIndex: "firstName"},
        { text: "Last Name", dataIndex: "lastName"},            
        { text: "Birth Date", dataIndex: "birthDate", xtype: "datecolumnn", width: 120}
    ]
}

相关问题