考虑下面的JSON示例：
[{id:1,editable:true},{id:2,editable:false}]
这些记录关于在商店要加载，则网格面板内显示。 此网格有版目的的行动列项。 我在寻找一种方式来仅第二行禁用“编辑”按钮，无需渲染后进行计算。 我想使用一个内置的功能，它的工作原理是将renderer属性，而不是循环穿过商店，一旦电网已经被渲染到更新的每一行。
是否ExtJS的4.1.1提供了这样的功能？
Answer 1:
您可以使用设置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的图标变得模糊和处理程序未触发鼠标点击。
Answer 2:
我正要说这个出发了：我不惜一切代价避免使用操作栏，这是完全不能做任何形式的呈现逻辑（如每行不同的图像，并显示基于行模式条件）的。 相反定义呈现图像，并采取在列click事件优势的定期专栏。 下面是从我的代码示例：
{
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
}
}
}
Answer 3:
我已经忘记了这个问题，直到路易斯张贴了他的答案。 我终于决定重写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;
}
});
Answer 4:
我发现，在煎茶论坛以下解决方案：此外在这里已经描述过的“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”的处理器是nessecary，因为否则，如果您单击即使不显示图标操作列中的处理程序将启动。
Answer 5:
香港专业教育学院使用了以下的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
}]
}
文章来源: How to disable action column item for a single row?
