Clever Geek Handbook

Hide action column elements in ext js

I want to hide the elements of an action column provided, please see 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 the above code, the Action column contains 3 items, Change, Space (for example, {xtype: 'spacer'}), and Delete . I want to hide the Delete Icon provided. The option to remove funds appears only when the administrator user is logged on. please see the design for this, you can get a better idea of ​​the problem

enter image description here

Using this code below, I can hide the Delete icon, but the tooltip and event click continue to fire when clicking on the hidden icon location.

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

enter image description here

+3


source to share


4 answers


I don't think hiding or disabling the icon is the solution here. If the user is not an administrator, why add an icon at all. I would use a method buildActionColumnItems

that will return items for the action column based on the current user role.

Action Column Configuration:

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


Method implementation buildActionColumnItems

:

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;
}
+1


source


I think maybe you want to 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);
        }
      }
     }
+1


source


You can use the method getClass

on the 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 it helps

0


source


Use isDisabled () method instead of hiding.

To work, the method must be in the action bar itself.

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

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

0


source






More articles:


All Articles