ExtJS 4单元“渲染器”问题 [英] ExtJS 4 cell "renderer" problem

问题描述

阅读这篇文章后，我设法改变了渲染。 / p>

我正在调用内部函数：

  renderer：this。 onRenderCell 
  

此功能如下所示：

  onRenderCell：function（value，metaData，record，rowIndex，
 colIndex，store，view）{
 metaData.css ='ini-cell-pas-traduit '; 
 return'& laquo;'+ value +'& raquo;'; 
} 
  

如果您仔细阅读，我返回'& laquo ;'+ value +'& raquo;'; 所以对于每个值，它被转换为：'« value» 。这是一个证明，在每一行，它的工作完美。那么应该是为了css。但是css应用了两次！这让我很坚强。

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

< img src =https://i.stack.imgur.com/FGDy1.pngalt =ExtJS单元格css问题>

任何想法，我应该采取看看？

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

  Ext.define（'Lang.grid.Panel'，{
 extends：'Ext.grid.Panel'，
 alias：'widget.langgrid'，
 
要求： [
'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： [{
i conCls：'icon-add'，
 text：'Add'，
 scope：this，
 handler：this.onAddClick 
}，{
 iconCls：'icon -delete'，
 text：'Delete'，
 disabled：true，
 itemId：'delete'，
 scope：this，
 handler：this.onDeleteClick 
}] 
}]，
列：[{
 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，
可排序：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（'choicechange'，this.onSelectChange，this）; 
 
 $ b（...）
（snip无用代码）
（...）
 
 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>'; 
} 
}）; 
  

解决方案

在metadata.css（ini-cell-pas -traduit）为 background-color

  background-color：红色！重要//或您指定的颜色。 
  

编辑：
这是因为网格被配置与 stripeRows：true 。我不知道如果这是默认完成，或者你在配置中完成，但忘了在这里提到它。当您使用 stripeRows 它设置一个 background-color ，可以使用！重写关键字。

After reading this article, I've managed to change rendering.

I'm calling an internal function:

renderer: this.onRenderCell

And this function is like this:

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

If you read carefully I return '«'+value+'»'; so for each value it is transformed to: '«value»'; . This is a proof that on every single line, it works perfectly. So should it be for the css. But the css is applied one time out of two!! This drives me nuts.

Here's what it gives (latest Firefox, same with latest Chrome):

Any idea where I should take a look?

Here's a big sample of my source code:

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>';
    }
});

解决方案

In the metadata.css (ini-cell-pas-traduit) do this for background-color

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

EDIT : This is happening because the grid is configured with stripeRows : true. I dunno if this is done by default or you did it in the config but forgot to mention it here. When you use stripeRows it sets a background-color which can be overriden using the !important keyword.

这篇关于ExtJS 4单元“渲染器”问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！