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/#fiddle/ne3