ExtJS：尝试为每列使用自定义渲染器，范围问题

Posted 2023-02-26

【中文标题】ExtJS：尝试为每列使用自定义渲染器，范围问题

【英文标题】：ExtJS: Trying to use custom renderer for each column, scope issue

【发布时间】：2014-02-03 17:51:03

【问题描述】：

所以我试图将自定义函数设置为每列的渲染器，但是我需要知道当前正在渲染哪一列，以便知道在渲染器中要做什么。 我定义并扩展了该列并创建了我自己的自定义列。我想在那里我可以定义自定义渲染函数，它的范围将是调用列。从那里我可以使用 this.mode、this.unit 等从列中获取我需要的信息以继续。但是这行不通，我一定没有正确理解。

Ext.define('column.Custom',

    extend: 'Ext.grid.column.Column',
    alias: 'widget.customcolumn',       
    listeners: 
        beforerender: function(col)
            //console.log(col);
        
    ,
    gridRenderer: function(value, cell, record, row, column)
    
        console.log(this);
        if (record.data.StartDate == 'N/A' ||
            record.data.EndDate == 'N/A')
        
            cell.style = 'background:#EEE;';
            return 'N/A';
                   
        // the locked grid has it's own renderers, so if we're here, assume we want the normalGrid      
        column = grid.normalGrid.columns[column];

        if (column.mode == 'cool')
        
            cell.style = 'background:#CCFFFF;';
            //cell.style = 'background:rgb(47, 162, 223);';
        
        else if (column.mode == 'heat')
        
            cell.style = 'background:#FFCCCC;';
        

             ....etc

        return ret;
    
);

这是我的专栏之一。

                               
    // defaults
    xtype: 'customcolumn',
    align: 'center',
    flex: 0,
    width: 90,
    sortable: true,
    //renderer: this.gridRenderer,
    lockable: false,                    
    locked: false,
    //hideable: false,
    // end default
    text: 'Total',
    menuText: 'Total',
    id: 'TotalSavingsColumn',
    dataIndex: 'Total',
    mode: 'none',
    unit: '%',
    renderer: 
        fn: this.gridRenderer,
        scope: this
    
,

而不是通过列索引抓取列，返回错误的列索引，因为隐藏列，我希望能够只使用this.mode，this.unit等。 有任何想法吗？感谢您的帮助。

【参考方案1】：

您可以在 column.Custom 类定义中定义 renderer 函数。如果您想将scope 设置为列本身，您可以在initComponent 方法中执行此操作：

Ext.define('column.Custom',

    extend: 'Ext.grid.column.Column',
    alias: 'widget.customcolumn', 
    initComponent: function() 
        // set scope property to this, so in renderer this will refers to column itself
        this.scope = this;

        this.callParent();
    ,
    renderer: function() 
        console.log(this);

        // your renderer...
    

);

那么你不需要在列配置中指定渲染器，因为你已经在 column.Custom 类中定义了它：

    // defaults
    xtype: 'customcolumn',
    align: 'center',
    flex: 0,
    width: 90,
    sortable: true,
    lockable: false,                    
    locked: false,
    //hideable: false,
    // end default
    text: 'Total',
    menuText: 'Total',
    id: 'TotalSavingsColumn',
    dataIndex: 'Total',
    mode: 'none',
    unit: '%'
,