ExtJS - Как получить addCls() и removeCls(), чтобы показать изменения

Question

Я пытаюсь динамически установить отступы на панели сетки, на которой отображаются некоторые данные. В случае, если мой флажок был нажат, он должен применить отступы cls.

Вот соответствующий код ExtJS:

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'));
        }
    }],
    //...
});

Вот мой CSS

.permissions_panel_nopadding {
    padding: 0px;
 }

.permissions_panel_padding {
    padding: 5px;
 }

Когда флажок установлен, в настоящий момент ничего не происходит. Я пытался использовать:

permissionsGrid.getView().refresh();

... но не превалировать.

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/