Extjs -无法隐藏/取消隐藏“网格”面板中特定行中的操作列图标

vzgqcmou  于 2022-11-04  发布在  其他
关注(0)|答案(1)|浏览(135)

我想隐藏/取消隐藏一个图标,我已经根据我得到的行数据添加到操作列中。我尝试使用getClass函数,但是图标从来没有在任何场景中显示过。不使用getClass函数,只使用icon键,我就可以一直显示图标(在下面的代码中注解掉了)。我错过了什么?

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条件,条件的值是正确的。对我遗漏了什么有什么想法吗?

72qzrwbm

72qzrwbm1#

为什么你用brackground而不是icon属性?图标是动态的还是静态的?

.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()
});

相关问题