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

问题描述：

我是ExtJS的新手，我想为数据网格的每一行添加喜欢的按钮。经过大量的Google搜索，我经历了几乎所有的信息来源，但是我还没有发现任何东西。如果任何人对如何做到这一点有明确的想法，请告诉我。如何在ExtJS中添加图像按钮的网格

答

默认情况下，首先在网格内添加ExtJS组件并不受支持，并且我在那里看到的教程有点不顺手。所以这就是我会做的。

我假设你的网格绑定到商店，并且商店中的每个记录都是网格中的一行。
我假设你在每条记录中都有一个代表该记录“最佳”状态的字段，也许是一个布尔值。

如果上述假设是真的，我之前做这样的事情：

在网格中添加一列与具有dataIndex指向最爱场ID“最爱-COL”你的商店。


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

渲染器添加到列渲染，如果行fav'ed不同的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”事件对电网，检查是否被点击的细胞是最爱细胞和切换记录的最爱值，网格将自动重新呈现一旦商店中的数据发生变化


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中添加图像按钮的网格

相关推荐