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);
        }
    }]

},

使用EXTJs 4.2

Answer 1

在处理函数中，iconflag是一个局部变量，它在处理函数之外丢失了它的值。如果在处理函数之外使用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

EXTJs Action Column图标

1 个答案: