6

I have a grid with a checkbox selection model.

Ext.define('Mb.view.ship.OrdersGrid', {
    extend: 'Ext.grid.Panel',
    selType: 'checkboxmodel',
    selModel: {
        injectCheckbox: 0,
        pruneRemoved: false
    },
    ...

There are some rows that shold not be selectable, based on a value in a field.

In a normal column, I can intervene in the display with renderer and hide the cell content with css (metadata.tdCls), but for the auto generated checkbox column, I cannot find a method to disable or hide the checkbox on a row basis.

Does anyone have an idea how to do this ?

Lorenz Meyer
  • 19,166
  • 22
  • 75
  • 121
  • possible duplicate of [Extjs Grid- disable some checkbox on special row](http://stackoverflow.com/questions/16975387/extjs-grid-disable-some-checkbox-on-special-row) – rixo Nov 22 '13 at 10:17
  • 3
    @rixo No, this is not a duplicate question. In ExtJs there is a column type *checkcolumn* and there is a selectionmodel called *checkboxmodel*. My question refers to the latter, while the other question refers to the first. – Lorenz Meyer Nov 22 '13 at 12:02
  • You're right, sorry I haven't seen that. – rixo Nov 22 '13 at 12:49

3 Answers3

10

You simply use the beforeselect event of the grid. Returning false, will not allow the selection. Check the documentation.

Ext.define('Mb.view.ship.OrdersGrid', {
    extend: 'Ext.grid.Panel',
    selType: 'checkboxmodel',
    selModel: {
        injectCheckbox: 0,
        pruneRemoved: false
    },

    listeners: {

        beforeselect: function(grid, record, index, eOpts) {
            if (record.get('yourProperty')) {//replace this with your logic.
                return false;
            }
        }

}
..........

If you really want to hide the checkbox, you could add CSS classes for your grid rows, and using them you could may be hide them. Check this answer for a solution.

Community
  • 1
  • 1
V G
  • 18,822
  • 6
  • 51
  • 89
  • 1
    Thanks, this is already a partial solution. But the user can not know if he can select without clicking. There should be a visual indicator to show if selection is possible. – Lorenz Meyer Nov 22 '13 at 09:50
  • Yes but how to you set the checkbox so that it is `disabled` state visually? –  Dec 03 '13 at 04:30
  • What do you mean by virtually? If you mean in HTML, then... why would one need it? – V G Dec 03 '13 at 09:17
6

In ExtJS 6 overriding renderer will not work.

You can get around that by defining viewConfig with getRowClass:

            getRowClass: function(record) {
                var classes = '';
                if (!record.get('available')) {
                    classes += ' selection-disabled';
                }
                return classes;
            }

Then in your CSS add this:

.selection-disabled .x-selmodel-column {
    visibility: hidden;
}

That will hide selection checkbox.

Now to disable selection by clicking on a row use the standard method. I.e. add a beforeselect to listeners to selModel:

        selModel: {
            selType: 'checkboxmodel',
            showHeaderCheckbox: false,
            listeners: {
                beforeselect: function(grid, record) {
                    if (!record.get('available')) {
                        return false;
                    }
                }
            }
        },
Nux
  • 9,276
  • 5
  • 59
  • 72
  • Based on your answer I created this fiddle: https://fiddle.sencha.com/#view/editor&fiddle/3evu. though I don't know why clearing all the selections by clicking the checkbox in the column header doesn't work (I left it visible). I will have to figure it out. – boggy Aug 05 '21 at 01:36
  • @costa Seems like ExtJS checks that not all rows are selected and doesn't allow you to do de-selection. Not sure if you could fix this without overrides. I guess at this point Sencha would have support this case somehow. – Nux Aug 07 '21 at 16:00
  • 1
    Great answer, thank you! But in my opinion grid looks much better with 'disabled' checkboxes than hidden ones. I'm sharing my modification for all interested: I modified @Nux css class to look like this: .selection-disabled .x-selmodel-column { filter: alpha(opacity=60); opacity: 0.6; } That's it. – Marcin Oct 25 '22 at 10:01
  • 1
    @Marcin I don't think you need to worry about IE8 this days . So you probably don't need that filter alpha fallback. Other then that, that sound reasonable too. – Nux Oct 25 '22 at 13:38
1

CheckboxSelectionModel also has a renderer.

var sm = new Ext.grid.CheckboxSelectionModel({
        checkOnly : true,
        renderer : function(v,p,record) {
        // First condition : show
        if (record.data.XXX == 'YYYY') return '<div class="x-grid3-row-checker">&nbsp;</div>';
        // else hide 
        else return '';
    },
    header: ''
});

https://www.sencha.com/forum/showthread.php?122496-How-to-hide-certain-checkbox-in-a-CheckboxSelectionModel

Returning empty '' also disables checkbox selection, not only by hiding it but also adding unselectable="on" to the parent div.

Don't know about doing it inside an Ext.define (never had the need to extend) , but seems feasible.

UPDATE: Despite having unselectable="on", clicking on the row (if enabled), or using the header checkbox (select-all) will select "disabled" rows. It may be a good idea to implement a listener then.

Daniel
  • 209
  • 1
  • 3
  • 12