Fixed checkbox column in EXTJS panel


Does anyone know of disabling horizontal scrolling on a column, checkboxes remain fixed and other columns scroll.

I tried

     bodyStyle:'overflowY: auto',




specifically checkboxSelectionModel and try to override the property but it doesn't work.

I am using ExtJs 4.0


see this image, I am talking about a checkbox column and in this note I am removing this scroll property on that particular column.


source to share

3 answers

I think this is what you are looking for

blocked . If the grid is configured with enableLocking, or has columns that are configured with a locked value, this option can be used to disable or unlock a custom lock for that column. This column will remain on the side that its own locked configuration placed it.

blocked . Correct to lock this column. Implicitly allows locking on the grid. See also Ext.grid.Panel.enableLocking.

Link to documentation: Ext 5.0

And here's an example:



You can try something like this

Ext.define("My.extension.LockedCheckBoxSelModel", {
extend: "Ext.selection.CheckboxModel",

getHeaderConfig: function () {
    return {
        isCheckerHd: true,
        text: ' ',
        width: 24,
        sortable: false,
        fixed: true,
        hideable: false,
        menuDisabled: true,
        dataIndex: '',
        locked: true,//here the difference
        cls: Ext.baseCSSPrefix + 'column-header-checkbox ',
        renderer: Ext.Function.bind(this.renderer, this)


And if you use this extension instead of the standard CheckboxModel, for example selModel: Ext.create('My.extension.LockedCheckBoxSelModel')

, the first column with a checkbox should be blocked. But you may need to enable grid locking, so set the grid property enableLocking: true or set locked: true on some grid columns



Add enableLocking: true to the mesh config. It will lock the selection model and enable the lock / unlock option for each column



All Articles