extjs - 如何在 GridPanel 中为 CheckboxModel 列设置固定宽度？

Question

我在我的网格面板中需要复选框选择模式，所以我使用Ext.selection.CheckboxModel组件，但我的问题是关于该组件将附加到我的网格的列（复选框列）。我想为它设置一个固定的宽度，因为当我调整浏览器窗口的大小时，此列的宽度可能会有所不同。我使用下面的代码，但它不起作用：

constructor: function() {
    var me = this;
        me.selModel = Ext.create('Ext.selection.CheckboxModel', {width: 16});
    me.callParent(arguments);
}

这是我的用户表的代码片段和快照：

Ext.define('VDOA.view.users.Table', {
    extend: 'Ext.grid.GridPanel',
    alias: 'widget.usersgrid',
    forceFit: true,
    selType: 'checkboxmodel',
    //selType: 'rowmodel',
    //selModel: Ext.create('Ext.selection.CheckboxModel'),
    title: '',
    initComponent: function() {
        ...
    }
});

Answer 1

您应该使用以下组合：

1. 按照 VDP 建议将 flex 属性设置为每一列
2. selModel按照headerWidthRich Waters 的建议定义

有了这种组合，您将能够使用复选框控制单元格的确切宽度

Answer 2

这是 Ext 4.0.7 中的一个错误：

这forceFit: true是搞砸了。他们建议设置flex:1在剩余的列上。这对我有用，但我仍然希望看到它更小。我可能会选择一个 CSS 解决方案。

sencha 论坛上的主题

Answer 3

有一个未记录的属性控制列宽，试一试：

selModel: {
    selType: 'checkboxmodel',
    headerWidth: 16
}

Answer 4

您尝试将所有内容都放在 "initComponent function" 中。

initComponent: function () {
    this.items = [{
       //define grid view 
       selModel: Ext.create('Ext.selection.CheckboxModel'),
       }
    ];
    this.callParent(arguments);
}

Answer 5

我认为你把事情复杂化了。只需将此行添加到您的网格面板定义中：

selType: 'checkboxmodel'

你会在前面得到漂亮、固定宽度、不可调整大小的复选框列。