2

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.

Mr. Polywhirl
  • 42,981
  • 12
  • 84
  • 132
Alpenglow
  • 173
  • 1
  • 17
  • Have you used debugging tools to check to see if the change is actually applied? The element inspectors should give you a good idea of what is going on. – kevhender Aug 26 '13 at 17:52
  • Yes my console.logs return true if it's there, and false if it's not. I'll dig a little deeper and inspect the elements to see the changes myself. – Alpenglow Aug 26 '13 at 18:21
  • The cls is added. I can see it when I inspect the element. However, there is no padding in the style tag. – Alpenglow Aug 26 '13 at 18:29
  • Look through the style panel in your debugger to try to see where that is getting swallowed. Hover over the element's HTML in the debugger to see what's happening with the padding. – kevhender Aug 26 '13 at 18:53
  • Found it in 'Matched CSS Rules' labeled as Invalid property value. I tried doing '5px 5px 5px 5px;' and that's seemed to work. I guess I had the mentality of setting ExtJS padding where you can just put one number to cover all sides. Must have to define each one accordingly. – Alpenglow Aug 26 '13 at 19:05

1 Answers1

2

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'));
}
MarthyM
  • 1,839
  • 2
  • 21
  • 23
  • Or you could just use [toggleCls](https://docs.sencha.com/extjs/6.6.0/classic/Ext.Component.html#method-toggleCls): `permissionsGrid.toggleCls('permissions_panel_nopadding', value);` – thoro Apr 22 '20 at 06:13
  • @thoro Thank you, I updated the answer accordingly. A side note: ExtJS 4.x had `toggleCls` method only with the `cls` parameter and ExtJS 5.x didn't have the method at all. – MarthyM Apr 22 '20 at 11:42