如何隐藏/删除操作列项?
Posted
技术标签:
【中文标题】如何隐藏/删除操作列项?【英文标题】:How to hide/ Remove action columns Item? 【发布时间】:2017-09-14 09:32:43 【问题描述】:我在网格视图的记录条件下隐藏/删除操作列项目时遇到问题。 让我们看看下面的代码。我做了一个动作列代码。我想隐藏图像中显示的删除图标。此删除图标在记录条件下隐藏/删除。
xtype: 'actioncolumn',
flex: 1,
align: 'center',
scope: this,
renderer: function (n, t, rec)
/* if (rec.get('companyId') == 23)
console.log('Distributor Account List');
else
console.log('Distributor Client user List');
*/
,
items: [
icon: FLEET_SERVER_URL + 'images/edit2.png',
tooltip: fleet.Language.get('_FLEET_USER_USERLIST_EDIT_'),
handler: function (grid, rowIndex, colIndex)
var rec = grid.getStore().getAt(rowIndex);
this.fireEvent('showUserDetails', rec);
,
xtype: 'spacer'
,
icon: (Ext.getStore('userStore').first().get('issuperadmin') == 1 || Ext.getStore('userStore').first().get('isadmin') == 1 || Ext.getStore('userStore').first().get('isadmin') == 3) ?
FLEET_SERVER_URL + 'images/vehicles/van-icon.png' : '', // Use a URL in the icon config
tooltip: fleet.Language.get('_FLEET_USER_USERLIST_VEHICLE_'),
handler: function (grid, rowIndex, colIndex)
var rec = grid.getStore().getAt(rowIndex);
this.fireEvent('assignvehicles', rec);
,
xtype: 'spacer'
,
icon: FLEET_SERVER_URL + 'images/del.png',
tooltip: fleet.Language.get('_FLEET_USER_USERLIST_DELETE_'),
handler: function (grid, rowIndex, colIndex)
Me = this;
var rec = grid.getStore().getAt(rowIndex);
Ext.Msg.show(
title: fleet.Language.get('_FLEET_USER_USERLIST_REMOVETITLE_'),
msg: fleet.Language.get('_FLEET_USER_USERLIST_REMOVEMSG_'),
buttons: Ext.Msg.YESNO,
icon: Ext.Msg.QUESTION,
callback: function (button)
if (button == fleet.Language.get('_FLEET_USER_USERLIST_YESBTN_'))
Me.removeUser(rec);
);
]
action 栏中有 4 个项目(编辑图标、间隔、间隔和删除图标)请参阅附图。
在上面的代码中有 Action 列渲染事件。例如我想检查公司 ID=23 的记录。我用这个条件进行测试。主要问题是我想在条件下隐藏删除图标。有什么合适的解决方案吗?
【问题讨论】:
是jquery数据表吗?如果没有,请让我们看看整个 javascript 代码 它是一个 ExJs(sencha) 网格视图。 哦,对不起,我没有这方面的经验 与您的问题不完全相关,但如果您正在考虑禁用操作项而不是隐藏,则有一个 isDisabled 方法可用于可能派上用场的操作项 【参考方案1】:您要做的不是使用icon
属性,而是要将图标放入一个类中相应的CSS 中。例如
.someIcon
background-image: path/to/icon.png no-repeat center center !important;
width:20px;
height:20px;
然后您可以添加 getClass
配置而不是图标配置,并根据需要提供 CSS 类,例如如果你想打开或关闭图标:
getClass: function(v, meta, rec)
if(rec.get('companyId')==23) return 'someIcon';
else return '';
或者,如果你想要不同的图标,例如:
getClass: function(v, meta, rec)
if(rec.get('isImportant')) return 'redIcon';
else return 'greyIcon';
请注意,如果您通过 SCSS 添加类,则必须在 Sencha Cmd 中重新编译您的项目。
【讨论】:
以上是关于如何隐藏/删除操作列项?的主要内容,如果未能解决你的问题,请参考以下文章
如何在Android应用程序的运行时隐藏(或删除)动作栏[重复]
如何把A表中X行的数值引进B表的X列,2个表的数值相同,但版面不同,A表显示为行项,B表显示为列项