如何在ExtJS中添加图像按钮网格

Question

我是ExtJS的新手，我想在数据网格的每一行添加一个喜欢的按钮。 经过大量的谷歌搜索后，我已经浏览了几乎所有来源，但我没有找到任何东西。 如果有人对如何做到这一点有明确的想法，请告诉我。

Answer 1

首先在默认情况下不支持在网格中添加ExtJS组件，我在那里看到的教程有点hacky。 所以这就是我要做的。

1. 我假设您的网格绑定到商店，并且商店中的每条记录都是网格中的一行。
2. 我假设你在每条记录中都有一个字段代表该记录的“fav”状态，可能是一个布尔值。

如果上述假设成立，我之前做过类似的事情：

• 在网格中添加一个id为“fav-col”的列，其中dataIndex指向商店的fav字段。

{
    id : 'fav-column', 
    dataIndex : 'fav',
    sortable : true,
    hideable : false,
    menuDisabled : true,
    fixed : true,
    width : 20, 
    renderer : renderFav
}

• 将渲染器添加到该列，该渲染器将呈现不同的HTML，具体取决于行是否为fav。

function renderFav(favAdded, metaData, record){
    if (favAdded === true){
        return 'fav added'; //something to represent already added to favourite  ;
    }else{
        return 'fav not added'; //something to represent non-fav'ed row;
    }
}

• 在网格上为'cellclick'事件添加一个监听器，检查被单击的单元格是否为fav单元格并切换记录的fav值，一旦商店中的数据发生变化，网格将自动重新渲染

cellclick : function(grid, cellEl, cellIdx, record, rowEl, rowIdx, evtObj){
    if (this.columns[cellIdx].getId() === 'fav-col'){
        record.set('fav', !record.get('fav')); //toggle the fav state
        grid.getStore().sync(); //if the store is a REST store, update backend
        record.commit(); //commit the record so the red triangle doesn't show
        this.doLayout(); //might not need this.
    }
}