在 ExtJS 4 网格中设置单元格 ID

Setting a cell ID in ExtJS 4 Grid

本文关键字:设置 单元格 ID 网格 ExtJS      更新时间:2023-09-26

我正在将大量旧的HTML代码移植到ExtJS 4网格中,并偶然发现了以下挑战:我希望能够为网格中的TD元素设置自定义ID。据我了解,我需要覆盖用于创建单元格的默认模板。我当前的模板如下所示:

    Ext.view.TableChunker.metaRowTpl = [
   '<tr class="' + Ext.baseCSSPrefix + 'grid-row {addlSelector} {[this.embedRowCls()]}" {[this.embedRowAttr()]}>',
    '<tpl for="columns">',
     '<td class="{cls} ' + Ext.baseCSSPrefix + 'grid-cell ' + Ext.baseCSSPrefix + 'grid-cell-{columnId} {{id}-modified} {{id}-tdCls} {[this.firstOrLastCls(xindex, xcount)]}" {{id}-tdAttr}><div class="' + Ext.baseCSSPrefix + 'grid-cell-inner ' + Ext.baseCSSPrefix + 'unselectable" style="{{id}-style}; text-align: {align};">{{id}}</div></td>',
    '</tpl>',
   '</tr>'
  ];

我可以使用什么占位符来操作表格单元格的"id="属性?

不要覆盖 tpl,只需设置一个自定义列渲染器即可更新列元数据:

columns: [{
    text: 'Blah',
    dataIndex: 'blah',
    renderer: function(value, metaData, record) {
        metaData.tdAttr = 'id="someprefix-' + record.get('blah') + '"';
        return value;
    }
}, ... ]

第一个答案对我来说效果很好,id提取很容易,这样:

oncellclick:function(grid, row, col, e){
        alert( row['id'])
    }