EXTJ 操作栏图标

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

Fiddle: https://fiddle.sencha.com/#view/editor&fiddle/205l

EXTJ 操作栏图标

EXTJs Action Column icon

extjs

extjs4.2