ExtJS 4 单元格“渲染器”问题

Question

阅读this article 后，我设法更改了渲染。

我正在调用一个内部函数：

renderer: this.onRenderCell

而这个函数是这样的：

onRenderCell: function(value, metaData, record, rowIndex,
  colIndex, store, view) {
  metaData.css = 'ini-cell-pas-traduit';
  return '«'+value+'»';
}   

如果您仔细阅读，我会返回 '«'+value+'»';，因此对于 每个 值，它会转换为：'«value»'; .这证明了在每一行上，它都能完美运行。所以应该是css。但是css是两次应用一次！！这让我抓狂。

这是它所提供的（最新的 Firefox，与最新的 Chrome 相同）：

知道我应该去哪里看看吗？

这是我的源代码的一个大示例：

Ext.define('Lang.grid.Panel', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.langgrid',

    requires: [
        'Ext.grid.plugin.CellEditing',
        'Ext.form.field.Text',
        'Ext.toolbar.TextItem'
    ],

    initComponent: function(){

        this.editing = Ext.create('Ext.grid.plugin.CellEditing');

        Ext.apply(this, {
            iconCls: 'icon-grid',
            plugins: [this.editing],
            dockedItems: [{
                xtype: 'toolbar',
                items: [{
                    iconCls: 'icon-add',
                    text: 'Add',
                    scope: this,
                    handler: this.onAddClick
                }, {
                    iconCls: 'icon-delete',
                    text: 'Delete',
                    disabled: true,
                    itemId: 'delete',
                    scope: this,
                    handler: this.onDeleteClick
                }]
            }],
            columns: [{
                text: 'label',
                flex:2,
                sortable: true,
                dataIndex: 'label'
            },{
              header: 'fr',
              flex: 3,
              sortable: true,
              dataIndex: 'fr',
              renderer: this.onRenderCell,
              field: {
                type: 'textfield'
              }
            },{
              header: 'es',
              flex: 3,
              sortable: true,
              dataIndex: 'es',
              renderer: this.onRenderCell,
              field: {
                type: 'textfield'
              }
            },{
              header: 'us',
              flex: 3,
              sortable: true,
              dataIndex: 'us',
              renderer: this.onRenderCell,
              field: {
                type: 'textfield'
              }
            }
            ]
        });
        this.callParent();
        this.getSelectionModel().on('selectionchange', this.onSelectChange, this);
    },

    (...)
    (snip useless code)
    (...)

    onRenderCell: function(value, metaData, record, rowIndex,
      colIndex, store, view) {
      metaData.css = 'ini-cell-pas-traduit';
      return '<span style="color:red; font-weight:bold;">&laquo;'+
        value+'&raquo;</span>';
    }
});

Answer 1

Varun Achar 使用 !important 是对的，但由于您使用的是 Ext JS 4，因此您也应该更改

metaData.css = 'ini-cell-pas-traduit';

到

metaData.tdCls = 'ini-cell-pas-traduit';

metaData 的 'css' 和 'attr' 成员现在已被 tdCls 和 tdAttr 替换，如果您还安装了 Ext 3 兼容层，旧的成员将仅在 Ext JS 4 中工作。

Answer 2

在 metadata.css (ini-cell-pas-traduit) 中为 background-color 执行此操作

background-color : red !important //or whichever color you've specified.

编辑： 这是因为网格配置了stripeRows : true。我不知道这是默认完成的，还是您在配置中完成的，但在这里忘记提及了。当您使用stripeRows 时，它会设置一个background-color，可以使用!important 关键字覆盖它。