考虑一下这个 JSON 示例：
[{id:1,editable:true},{id:2,editable:false}]
这些记录即将加载到商店中，然后显示在网格面板中。此网格有一个用于编辑目的的操作列项。我正在寻找一种仅在第二行禁用“编辑”按钮而不在渲染后执行计算的方法。我想使用类似于renderer 属性的内置功能，而不是在渲染网格后循环通过存储来更新每一行。
ExtJS 4.1.1 是否提供这种功能？
【问题讨论】：
标签： extjs grid extjs4 action extjs4.1
我只想这样说开始：我不惜一切代价避免使用操作列，它完全无法执行任何类型的渲染逻辑（例如每行不同的图像，并根据行模型有条件地显示） .而是定义一个常规列来呈现图像并利用列中的单击事件。这是我的代码中的一个示例：
{
header: " ",
dataIndex: "some_index",
width: 26,
renderer: function(value, metaData){
metaData.style += "padding:0px;";
if(value)
return " <img src=\"extjs/4.0/sms/icons/fam/magnifier.png\"/>";
return value;
},
listeners: {
click: function(gridView, htmlSomething, rowIndex, columnIndex, theEvent){
var store = myGrid.getStore();
var record = store.getAt(rowIndex);
if(record.get("some_index"))
//do action
}
}
}
【讨论】：
您可以使用设置 isDisabled 配置（至少从版本 4.2.1 开始）：
{
xtype:'actioncolumn',
width:20,
items: [
{
icon: 'app/images/edit.png',
tooltip: 'Edit this row',
handler: function(gridview, rowIndex, colIndex, item, e, record, row) {
var grid=gridview.up('grid');
// You need to listen to this event on your grid.
grid.fireEvent('editRecord', grid, record);
},
isDisabled: function(view, rowIndex, colIndex, item, record) {
// Returns true if 'editable' is false (, null, or undefined)
return !record.get('editable');
}
]
}
当 isDisabled(..) 返回 true 时，图标会变得模糊，并且不会在鼠标单击时触发处理程序。
【讨论】：
在路易斯发布他的答案之前，我已经忘记了这个问题。我最终决定重写 ActionColumn 以添加缺少的功能。这是代码：
Ext.grid.column.Action.override({
defaultRenderer: function (v, meta) {
var me = this,
disabled, tooltip,
prefix = Ext.baseCSSPrefix,
scope = me.origScope || me,
items = me.items,
len = items.length,
i = 0,
item;
v = Ext.isFunction(me.origRenderer) ? me.origRenderer.apply(scope, arguments) || '' : '';
meta.tdCls += ' ' + Ext.baseCSSPrefix + 'action-col-cell';
for (; i < len; i++) {
item = items[i];
disabled = item.disabled || (item.isDisabled ? item.isDisabled.apply(item.scope || scope, arguments) : false);
tooltip = disabled ? null : (item.tooltip || (item.getTip ? item.getTip.apply(item.scope || scope, arguments) : null));
if (!item.hasActionConfiguration) {
item.stopSelection = me.stopSelection;
item.disable = Ext.Function.bind(me.disableAction, me, [i], 0);
item.enable = Ext.Function.bind(me.enableAction, me, [i], 0);
item.hasActionConfiguration = true;
}
v += '<img alt="' + (item.altText || me.altText) + '" src="' + (item.icon || Ext.BLANK_IMAGE_URL) +
'" class="' + prefix + 'action-col-icon ' + prefix + 'action-col-' + String(i) + ' ' + (disabled ? prefix + 'item-disabled' : ' ') +
' ' + (Ext.isFunction(item.getClass) ? item.getClass.apply(item.scope || scope, arguments) : (item.iconCls || me.iconCls || '')) + '"' +
(tooltip ? ' data-qtip="' + tooltip + '"' : '') + ' />';
}
return v;
}
});
【讨论】：
我在煎茶论坛找到了如下解决方案： 除了此处已经描述的“isDisabled”功能之外，您还可以使用以下配置来更改（或隐藏）要根据记录显示的图标：
getClass: function(value,metadata,record){
if (record.get('description')){ //read your condition from the record
return 'icon-pencil-go'; // add a CSS-Class to display what icon you like
} else {
return ''; //add no CSS-Class
}
}
我的 CSS 类定义为：
.icon-pencil-go {
background-image: url('../images/icons/famfamfam/pencil_go.png') !important;
}
反正我是通过 CSS 显示图标的，这对我来说是一种快速动态更改图标的方法。请注意，通过“isDisabled”禁用处理程序仍然是必要的，否则即使未显示图标，如果单击操作列，处理程序也会启动。
【讨论】：
我在 ExtJs 6.0.1 版本中使用了以下内容并且效果很好。使用“getClass”配置。 一个返回 CSS 类以应用于图标图像的函数。
{
xtype: 'actioncolumn',
flex: 1,
text: 'Action'
items: [{
tooltip: 'Import',
getClass: function (value, meta, record) {
if(record.get('Name') == 'disable'){
return 'x-hidden'; // when u want to hide icon
}
}
return 'x-grid-icon' ; // show icon
}]
}
【讨论】：