在EXT js中隐藏操作列项目

jexiocij  于 2022-10-18  发布在  其他
关注(0)|答案(6)|浏览(270)

我想隐藏条件下的操作列项目,请查看下面的代码。

{
 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);
                     }
                 }
             });
         }
     }
 }]
}

在上述代码中,操作列包含3个项目:编辑、空格(即{xtype:‘Spacer’})、删除图标。我想在条件下隐藏删除图标。表示仅在管理员用户登录时显示删除选项。请看一下这个设计,你可以对问题有更好的想法

使用下面的代码,我能够隐藏删除图标,但工具提示和单击事件仍然会在单击隐藏图标位置时触发。

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

iszxjhcz

iszxjhcz1#

我不认为隐藏或禁用图标是这里的解决方案。如果用户不是管理员,为什么要费心添加图标呢?我将使用buildActionColumnItems方法,该方法将根据当前用户的角色返回操作列的项。
操作栏CONFIG:

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

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;
}
zsohkypk

zsohkypk2#

不是隐藏,而是使用isDisable()方法。
要工作,该方法必须在action列本身中。

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

小提琴:https://fiddle.sencha.com/#view/editor&fiddle/20pr

bd1hkmkf

bd1hkmkf3#

我想也许你想要隐藏和隐藏模式。Http://docs.sencha.com/extjs/6.2.0/classic/Ext.grid.column.Action.html#cfg-hiddenhttp://docs.sencha.com/extjs/6.2.0/classic/Ext.grid.column.Action.html#cfg-hideMode
注:未经测试

{
     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);
        }
      }
     }
zvms9eto

zvms9eto4#

可以在同一对象中使用getClass方法

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';
        }
 }

希望这能有所帮助

ippsafx7

ippsafx75#

您可以添加css类

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

如果您想隐藏,可以向元素添加css,如下所示:

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

yk9xbfzb6#

您可以更改禁用项目的css,例如在sass文件中。

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

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

相关问题