ExtJS - How to get addCls() and removeCls() to show changes

Question

I am trying to dynamically set the padding on a grid panel I have showing some data. On the event that my checkbox was clicked, it should apply the padding cls.

Here is the relevant ExtJS code:

var permissionsGrid = Ext.create('Ext.grid.Panel', {
    //...
    items: [{
        xtype: 'checkbox',
        name: 'EditRoles',
        boxLabel: 'Edit User Roles',
        handler: function(field, value) {
            userRoleFilter = '';
            permissionsGrid.removeCls('permissions_panel_nopadding');
            console.log(permissionsGrid.hasCls('permissions_panel_nopadding'));
            permissionsGrid.addCls('permissions_panel_padding');
            console.log(permissionsGrid.hasCls('permissions_panel_padding'));
        }
    }],
    //...
});

Here is my CSS

.permissions_panel_nopadding {
    padding: 0px;
 }

.permissions_panel_padding {
    padding: 5px;
 }

When the checkbox is clicked, currently nothing happens. I tried to use:

permissionsGrid.getView().refresh();

...but to no prevail.

Answer 1

You are always removing one class and always adding another class. You need to "switch" the classes. If you don't need special styling when the checkbox isn't clicked, you should add/remove only one class.

handler: function(field, value) {
    userRoleFilter = '';
    if ( value === true) {
        permissionsGrid.removeCls('permissions_panel_nopadding');
        permissionsGrid.addCls('permissions_panel_padding');
    }
    else {
        permissionsGrid.addCls('permissions_panel_nopadding');
        permissionsGrid.removeCls('permissions_panel_padding');
    }

    console.log(permissionsGrid.hasCls('permissions_panel_padding'), permissionsGrid.hasCls('permissions_panel_nopadding'));
}

Here is my fiddle with basic panel and only one CSS class: https://fiddle.sencha.com/#fiddle/ne3

EDIT:

ExtJS 6.0+

Since ExtJS 6.0.0, you can use the toggleCls method:

handler: function(field, value) {
    permissionsGrid.toggleCls('permissions_panel_padding', value);
    permissionsGrid.toggleCls('permissions_panel_nopadding', !value);

    console.log(permissionsGrid.hasCls('permissions_panel_padding'), permissionsGrid.hasCls('permissions_panel_nopadding'));
}