Question

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

我正在调用内部函数：

renderer: this.onRenderCell

这个功能是这样的：

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

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

这是它给出的（最新的Firefox，与最新的Chrome相同）：

ExtJS cell css problem

我知道应该去哪看看吗？

以下是我的源代码的一个重要示例：

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

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

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

编辑： 这是因为网格配置了stripeRows : true。我不知道如果默认情况下这样做，或者你在配置中做了但是忘了在这里提一下。当您使用stripeRows时，它会设置background-color，可以使用!important关键字覆盖。

Answer 2

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中使用。

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

2 个答案: