Question

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

Answer 1

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

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

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

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


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

向该列添加一个呈现器，该呈现器呈现不同的HTML，具体取决于该行是否有用。

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.
    }
}

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

1 个答案: