我想隐藏条件下的操作列项目,请查看下面的代码。
{
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' : ''),
6条答案
按热度按时间iszxjhcz1#
我不认为隐藏或禁用图标是这里的解决方案。如果用户不是管理员,为什么要费心添加图标呢?我将使用
buildActionColumnItems
方法,该方法将根据当前用户的角色返回操作列的项。操作栏CONFIG:
buildActionColumnItems
方法实现:zsohkypk2#
不是隐藏,而是使用isDisable()方法。
要工作,该方法必须在action列本身中。
小提琴:https://fiddle.sencha.com/#view/editor&fiddle/20pr
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
注:未经测试
zvms9eto4#
可以在同一对象中使用
getClass
方法希望这能有所帮助
ippsafx75#
您可以添加css类
如果您想隐藏,可以向元素添加css,如下所示:
yk9xbfzb6#
您可以更改禁用项目的css,例如在sass文件中。