EXTJs 操作列图标

Question

我希望图标在单击时从接受更改为删除。设置iconflag = 1因为在页面加载时我希望看到接受图标。

下面的代码不满足预期

{
    xtype: 'actioncolumn',
    width: 30,
    items: [{
        flex: 1,
        tooltip: 'Click to expand',
        icon: iconflag == '1' ? "shared/icons/fam/accept.gif" : "shared/icons/fam/delete.gif",
        getClass: this.getActionClass,
        handler: function() {
            if (iconflag == '1') {
                iconflag = '0';
            } else if (iconflag == '0') {
                iconflag = '1';
            }
            alert(iconflag);
        }
    }]
},

使用 EXTJ 4.2

Answer 1

在处理程序函数中，iconflag 是一个局部变量，在处理程序函数之外丢失其值。如果您在处理程序函数之外使用 iconflag，则在单击图标之前，它只会被评估一次。

您要做的是将变量存储在自动强制网格更新的位置。这就是为什么您要将图标标志存储在存储中的记录上的原因。

向模型添加另一个字段：

{
    name: 'iconflag',
    type: 'bool',
    defaultValue: false,
    persist: false
}

将图标移动到 CSS 中：

Ext.util.CSS.createStyleSheet([
    '.iconflag-accept {',
    '     background-image: url('shared/icons/fam/accept.gif')',
    '}',
    '.iconflag-delete {'
    '    background-image: url('shared/icons/fam/delete.gif')',
    '}'
].join(''));

更新列以使用该字段：

dataIndex: 'iconflag',
getClass: function(iconflag) {
    if(iconflag) return 'iconflag-delete';
    else return 'iconflag-accept';
},
handler: function(view, colindex, rowindex, item, e, record) {
    record.set('iconflag', !record.get('iconflag'));
}

小提琴：https://fiddle.sencha.com/#view/editor&fiddle/205l