css - 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

您总是在删除一个类并总是添加另一个类。您需要“切换”课程。如果未单击复选框时不需要特殊样式，则应仅添加/删除一个类。

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'));
}

这是我对基本面板和只有一个 CSS 类的小提琴：https ://fiddle.sencha.com/#fiddle/ne3

编辑：

ExtJS 6.0+

从 ExtJS 6.0.0 开始，您可以使用以下toggleCls方法：

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'));
}