如何在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

这是Ext 4.0.7中的一个错误：

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

thread on the sencha forum

Answer 2

有一个未记录的属性可以控制列宽，请注意：

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

Answer 3

您应该使用以下组合：

1. 以建议的VDP
为每列设置flex属性
2. 使用selModel定义headerWidth作为Rich Waters建议

使用此组合，您将能够使用复选框

控制单元格的精确宽度

Answer 4

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

selType: 'checkboxmodel'

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

Answer 5

您尝试将所有内容放在“initComponent函数”中。

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