Question

我正在使用getClass在动作列中呈现图标。

{
xtype: 'actioncolumn',
id:'actionColumnGridUsers',
width: 30,
hideable: false,
items: ['->',
    {
        getClass: function (v, meta, rec)
        {
            if (rec.get('nameUser') != '') return 'icon-edit';
            else return 'icon-add';
        }

    }
}

和css代码：

.icon-add { background-image: url("../images/add.png"); }
.icon-edit { background-image: url("../images/edit.png"); }

代码似乎是正确的，但图标未显示。我缺少什么？

Answer 1

我已经解决了这个问题：

{
    xtype: 'actioncolumn',
    id:'actionColumnGridUsers',
    width: 30,
    hideable: false,
    items:
        [{
            getClass: function(v, meta, rec) {
                if (rec.get('nameUser') != '') {
                    this.items[0].tooltip = 'del';
                    return 'icon-del';
                } else {
                    this.items[0].tooltip = 'edit';
                    return 'icon-edit';
                }
            }
        }]
}

和css代码：

.x-action-col-cell img.icon-del {
background-image: url("../images/delete.png");
}
.x-action-col-cell img.icon-edit {
    background-image: url("../images/add.png");
}

Answer 2

或者你可以试试这个：

iconCls：me.readOnly == true？＆＃39;图标视图＆＃39; ：＆＃39; icon-edit＆＃39;，

extjs4动态更改操作列图标

2 个答案: