Extjs - 无法 hide/unhide 网格面板中特定行中的操作列图标
Extjs - Not able to hide/unhide actioncolumn icon in specific rows in Grid panel
我正在寻找 hide/unhide 我根据获得的行数据添加到操作列中的图标。我尝试使用 getClass 函数,但该图标在任何情况下都不会出现。不使用 getClass 函数,只使用图标键,我可以一直显示图标(在下面的代码中注释掉)。我在这里错过了什么?
this.columns = [{
xtype: 'actioncolumn',
itemId:'invalid_icon',
sortable: false,
menuDisabled: true,
cls:'table_invalid_icon',
width: 70,
items: [{
getClass: function(Value, metaData, record){
if(record.data.name !== 'test' ){
return "hideDisplay";
}else{
return "showIcon";
}
}
//icon: 'image.svg'
}]
}]
我有对应的css如下:
.showIcon{
background:url('image.svg');
}
.hideDisplay{
background:none;
}
我也验证了 if 条件并且条件具有正确的值。关于我遗漏的任何想法?
为什么用背景而不是图标属性?图标是动态的还是静态的?
.hidden {
display: none
}
和工作样本:
Ext.create('Ext.data.Store', {
storeId: 'employeeStore',
fields: ['firstname', 'lastname', 'seniority', 'dep', 'hired'],
data: [{
firstname: "Michael",
lastname: "Scott"
}, {
firstname: "Dwight",
lastname: "Schrute"
}, {
firstname: "Jim",
lastname: "Halpert"
}, {
firstname: "Kevin",
lastname: "Malone"
}, {
firstname: "Angela",
lastname: "Martin"
}]
});
Ext.create('Ext.grid.Panel', {
title: 'Action Column Demo',
store: Ext.data.StoreManager.lookup('employeeStore'),
columns: [{
text: 'First Name',
dataIndex: 'firstname'
}, {
text: 'Last Name',
dataIndex: 'lastname'
}, {
xtype: 'actioncolumn',
width: 50,
items: [{
icon: 'https://docs.sencha.com/extjs/4.2.6/extjs-build/examples/shared/icons/fam/cog_edit.png', // Use a URL in the icon config
tooltip: 'Edit',
hidden: true,
getClass: function (value, metaData, record, rowIndex) {
if (rowIndex % 2) {
return 'hidden'
}
},
handler: function (grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("Edit " + rec.get('firstname'));
}
}]
}],
width: 250,
renderTo: Ext.getBody()
});
我正在寻找 hide/unhide 我根据获得的行数据添加到操作列中的图标。我尝试使用 getClass 函数,但该图标在任何情况下都不会出现。不使用 getClass 函数,只使用图标键,我可以一直显示图标(在下面的代码中注释掉)。我在这里错过了什么?
this.columns = [{
xtype: 'actioncolumn',
itemId:'invalid_icon',
sortable: false,
menuDisabled: true,
cls:'table_invalid_icon',
width: 70,
items: [{
getClass: function(Value, metaData, record){
if(record.data.name !== 'test' ){
return "hideDisplay";
}else{
return "showIcon";
}
}
//icon: 'image.svg'
}]
}]
我有对应的css如下:
.showIcon{
background:url('image.svg');
}
.hideDisplay{
background:none;
}
我也验证了 if 条件并且条件具有正确的值。关于我遗漏的任何想法?
为什么用背景而不是图标属性?图标是动态的还是静态的?
.hidden {
display: none
}
和工作样本:
Ext.create('Ext.data.Store', {
storeId: 'employeeStore',
fields: ['firstname', 'lastname', 'seniority', 'dep', 'hired'],
data: [{
firstname: "Michael",
lastname: "Scott"
}, {
firstname: "Dwight",
lastname: "Schrute"
}, {
firstname: "Jim",
lastname: "Halpert"
}, {
firstname: "Kevin",
lastname: "Malone"
}, {
firstname: "Angela",
lastname: "Martin"
}]
});
Ext.create('Ext.grid.Panel', {
title: 'Action Column Demo',
store: Ext.data.StoreManager.lookup('employeeStore'),
columns: [{
text: 'First Name',
dataIndex: 'firstname'
}, {
text: 'Last Name',
dataIndex: 'lastname'
}, {
xtype: 'actioncolumn',
width: 50,
items: [{
icon: 'https://docs.sencha.com/extjs/4.2.6/extjs-build/examples/shared/icons/fam/cog_edit.png', // Use a URL in the icon config
tooltip: 'Edit',
hidden: true,
getClass: function (value, metaData, record, rowIndex) {
if (rowIndex % 2) {
return 'hidden'
}
},
handler: function (grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("Edit " + rec.get('firstname'));
}
}]
}],
width: 250,
renderTo: Ext.getBody()
});