Hide action column items in ext js

Question

I want to hide action column items on condition, Please look below code.

{
 xtype: 'actioncolumn',
 flex: 1,
 sortable: false,
 menuDisabled: true,
 align: 'center',
 items: [{

     icon: (fleet.rolerightscreate.modulerights('Editmanagevehicle', 'Manage Vehicle', 'E') != null) ? FLEET_SERVER_URL + 'images/edit2.png' : '',
     tooltip: fleet.Language.get('_FLEET_VEHICLE_VEHICLELIST_EDIT_'),
     scope: this,

     handler: function(grid, rowIndex, colIndex) {

         //var data = Vehiclestore.data.items[rowIndex].data;
         var rec = grid.getStore().getAt(rowIndex);
         console.log(rec);
         if (fleet.rolerightscreate.modulerights('Editmanagevehicle', 'Manage Vehicle', 'E') != null) {
             this.fireEvent("ShowVehicleDetails", rec);
         }
     }
 }, {
     xtype: 'spacer'
 }, {
     icon: (Ext.getStore('userStore').first().get('issuperadmin') == 1 ? FLEET_SERVER_URL + 'images/del.png' : ''),
     //(fleet.rolerightscreate.modulerights('Deletemanagevehicle', 'Manage Vehicle', 'D') != null) ? FLEET_SERVER_URL + 'images/del.png' : '',  // Use a URL in the icon config  

     tooltip: fleet.Language.get('_FLEET_VEHICLE_VEHICLELIST_DELETE_'),
     handler: function(grid, rowIndex, colIndex) {
         var rec = grid.getStore().getAt(rowIndex);
         if (fleet.rolerightscreate.modulerights('Deletemanagevehicle', 'Manage Vehicle', 'D') != null) {
             Ext.Msg.show({
                 title: fleet.Language.get('_FLEET_VEHICLE_VEHICLELIST_REMOVETITLE_'),
                 msg: fleet.Language.get('_FLEET_VEHICLE_VEHICLELIST_REMOVEMSG_'),
                 buttons: Ext.Msg.YESNO,
                 icon: Ext.Msg.QUESTION,
                 callback: function(button) {
                     if (button == fleet.Language.get('_FLEET_VEHICLE_VEHICLELIST_YESBTN_')) {
                         me.removeVehicle(rec);
                     }
                 }
             });
         }
     }
 }]
}

In above code, Action column contain 3 Items, Edit, space (i.e. { xtype: 'spacer' }), and Delete Icons. I want to hide Delete Icon on condition. Means delete option shown only when admin user login. please look design for this, you can get better idea about problem

Using this code bellow I am able to hide Delete icon but tooltip and click event still fire on click on hidden icon location.

icon: (Ext.getStore('userStore').first().get('issuperadmin') == 1 ? FLEET_SERVER_URL + 'images/del.png' : ''),

score 1 · Answer 1 · answered Jun 02 '17 at 10:02

Instead of hiding use isDisabled() method.

To work the method has to be in the actioncolumn itself.

    isDisabled: function (grid, rowIndex, colIndex, items, record) {
        if (condition) {
             return true;
        } else {
            return false;
        }
    }

FIDDLE: https://fiddle.sencha.com/#view/editor&fiddle/20pr

score 1 · Answer 2 · answered Jun 02 '17 at 16:52

I think maybe you want hide and hideMode. http://docs.sencha.com/extjs/6.2.0/classic/Ext.grid.column.Action.html#cfg-hidden http://docs.sencha.com/extjs/6.2.0/classic/Ext.grid.column.Action.html#cfg-hideMode

note: untested

{
     xtype: 'actioncolumn',
     flex: 1,
     sortable: false,
     menuDisabled: true,
     align: 'center',
     items: [{

     // add the type of rendering method you want
     hideMode: 'display',

     // do permissions check here
     hide: fleet.rolerightscreate.modulerights('Editmanagevehicle', 'Manage Vehicle', 'E') != null) ? true : false,

     icon:(fleet.rolerightscreate.modulerights('Editmanagevehicle', 'Manage Vehicle', 'E') != null) ? FLEET_SERVER_URL + 'images/edit2.png' : '',
     tooltip: fleet.Language.get('_FLEET_VEHICLE_VEHICLELIST_EDIT_'),
     scope: this,
     handler: function(grid, rowIndex, colIndex) {
       //var data = Vehiclestore.data.items[rowIndex].data;
       var rec = grid.getStore().getAt(rowIndex);
       console.log(rec);
       if (fleet.rolerightscreate.modulerights('Editmanagevehicle', 'Manage Vehicle', 'E') != null) {
         this.fireEvent("ShowVehicleDetails", rec);
        }
      }
     }

score 1 · Accepted Answer · answered Jun 04 '17 at 07:15

I don't think hiding or disabling the icon is the solution here. If the user is not admin why bother with adding the icon at all. I would buildActionColumnItems method that will return the items for the action column based on current user's role.

The action column config:

{
    xtype: 'actioncolumn',
    flex: 1,
    sortable: false,
    menuDisabled: true,
    align: 'center',
    items: this.buildActionColumnItems()
}

The buildActionColumnItems method implementation:

buildActionColumnItems: function () {
    //set the implicit items
    var columnItems = [{
        icon: (fleet.rolerightscreate.modulerights('Editmanagevehicle', 'Manage Vehicle', 'E') != null) ? FLEET_SERVER_URL + 'images/edit2.png' : '',
        tooltip: fleet.Language.get('_FLEET_VEHICLE_VEHICLELIST_EDIT_'),
        ...
    }];

    //add aditional items if the user is super admin
    if (Ext.getStore('userStore').first().get('issuperadmin') == 1) {
        columnItems.push({
            xtype: 'spacer'
        });
        columnItems.push({
            icon: FLEET_SERVER_URL + 'images/del.png',
            tooltip: fleet.Language.get('_FLEET_VEHICLE_VEHICLELIST_DELETE_'),
            ...
        });
    }

    return columnItems;
}

Ronak Patel · Answer 4 · 2017-06-02T09:52:36.187

0

You can use getClass method in same object

handler: function(grid, rowindex, cellIndex, a, e, record, tr) {
    if (condition)
       {
        //some logic
       }
    },
getTip: function(v, meta, rec) {
     if (condition) {
         return '';
     } else {
         return 'ToolTip';
     }
    }
getClass: function(v, meta, rec) {
   if (condition) {
                return '';
        } else {
                return 'co-delete-ico';
        }
 }

Hope this helps

edited Jun 02 '17 at 09:52

answered Jun 02 '17 at 07:48

Ronak Patel

651
6
19

I used this code :--> icon: (Ext.getStore('userStore').first().get('issuperadmin') == 1 ? FLEET_SERVER_URL + 'images/del.png' : ''), but this only get hide 'delete' icon, When I gose on that location of icon I see tooltip and when I click there delete window popups. – Vikas Hire Jun 02 '17 at 09:26
I have updated the answer, in handle function also you have to check your condition then it will not open delete popup. – Ronak Patel Jun 02 '17 at 09:53

Ilyes · Answer 5 · 2022-10-10T12:30:22.917

0

You can change css for disabled item for example in sass file

.grid-custom {
    .x-action-col-cell .x-item-disabled {
        opacity: 0;
    }
}


isActionDisabled: function (grid, rowIndex, colIndex, item, record) {
    if (condition) {
        return true;
    }
}

edited Oct 10 '22 at 12:30

answered Oct 07 '22 at 10:24

Ilyes

41
3

score 0 · Answer 6 · answered Oct 07 '22 at 10:49

You can add css class

.grid-cell-action-col-item-hide {
    visibility: hidden;
}

and if you want hide you could add css to element like:

getClass: function(v, meta, record) {
   if(hideFn(record)){
        return 'grid-cell-action-col-item-hide';
   }
   return "";
}

Hide action column items in ext js

6 Answers6