How to set a fixed width for CheckboxModel column in GridPanel? - extjs

Question

I needed checkbox selection mode in my gridpanel, so i use Ext.selection.CheckboxModel component, but my problem is about the column (checkbox column) which this component will append to my grid. I want to set a fixed width for it, because this column's width may vary when i resize the browser window. I use the code below, but it doesn't work:
constructor: function() {
var me = this;
me.selModel = Ext.create('Ext.selection.CheckboxModel', {width: 16});
me.callParent(arguments);
}
This is code snippet and snapshot of my users table:
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

It's a bug in Ext 4.0.7:
It's the forceFit: true that screws up. They suggest to set flex:1 on the remaining columns. That worked for me but I would still like to see it smaller. I'll probably go for a css solution.
thread on the sencha forum

Answer 2

You should use combination of:
Set flex property to each column as VDP proposed
Define selModel with headerWidth as Rich Waters proposed
Having this combination you will be able to control exact width of cell with checkbox

Answer 3

There's an undocumented property that controls the column width, give this a shot:
selModel: {
selType: 'checkboxmodel',
headerWidth: 16
}

Answer 4

I think you're over-complicating things. Just add this line into your grid panel definition:
selType: 'checkboxmodel'
And you will get nice, fixed width, non resizable checkbox column in the front.

Answer 5

You try to put every thing inside the "initComponent function" .
initComponent: function () {
this.items = [{
//define grid view
selModel: Ext.create('Ext.selection.CheckboxModel'),
}
];
this.callParent(arguments);
}