为什么此ExtJS操作列的单击处理程序不起作用?

时间:2014-04-14 15:46:29

标签: extjs

我创建了一个带有图标的操作列,如果被点击的行是eval许可证,我想隐藏图标。但是没有调用click事件处理程序?

xtype: 'actioncolumn',
text: 'Actions',
align: 'center',
width: 110,
listeners: [{
    getTip: function (v, metadata, rec, row, col, store) {
        return 'delete ' + rec.get('licenseid');
    },
    click: function (grid, rowIndex, colIndex, item, event, record, row) {
        alert('here');
        this.fireEvent('LicenseIconClick', grid, record, 'delete');
    }
}],
renderer: function(value, metadata, record){
    if(record.get('licenseid') == 'atlas_usx_evaluation') {
        return "<img src='./images/atlas/icons/blue/settings-close-b.png'>";
    }
}

1 个答案:

答案 0 :(得分:1)

Action Column没有,因此不会触发点击事件。

使用处理程序功能和 getClass 代替

    xtype:'actioncolumn',
    width:50,
    items: [{
        tooltip: 'Edit',
        handler: function(grid, rowIndex, colIndex) {
            var rec = grid.getStore().getAt(rowIndex);
            alert("Edit " + rec.get('firstname'));
            this.fireEvent('LicenseIconClick', grid, record, 'delete');
            //grid.doLayout(); //maybe... I'm not sure if it is necessary 
        },
        getClass: function(v, meta, rec) {
            if (record.get('licenseid') == 'atlas_usx_evaluation') {
                return 'settingCloseA';
            } else {
                return 'settingCloseB';
            }
        }
    }]

CSS课程

.x-action-col-cell img.settingCloseA {
    background-image: url("./images/atlas/icons/blue/settings-close-a.png");
}

.x-action-col-cell img.settingCloseB {
    background-image: url("./images/atlas/icons/blue/settings-close-b.png");
}   

使用getClass,您可以动态地应用带有所需图标的css类。 在处理程序功能中,您可以触发事件。