2

根据 Sencha 文档，numbercolumn、datecolumn 和 booleancolumn 没有渲染器事件。尽管这听起来很合乎逻辑，但在这些列类型上没有渲染器事件存在一个固有问题。

当记录的 LineNum 在警告行号数组中时，视图控制器中的渲染器函数示例修改背景颜色。

renderCompanyID: function(value, metaData, record, rowIndex, colIndex, store, view) {
    if (record.get('LineNum') > 0) {
        this.warningLineArr.forEach( function (item, index){
            if (item['LineNum'] == record.get('LineNum')) {
                metaData.style = "background-color: rgba(255, 184, 77, 0.25);";
                view.addRowCls(rowIndex, 'rec-warn');
            }
        });
    }
},

而gridcolumn定义中的渲染器如下

xtype: 'gridcolumn',
   renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
      Ext.fireEvent('renderCompanyID', value, metaData, record, rowIndex, colIndex, store, view);
      return value;
  },
dataIndex: 'CompanyID',
text: 'Company ID'

由于在数字和日期列上没有渲染器选项，结果如下：

渲染结果

所以问题是，数字、日期或布尔列上是否有事件、侦听器或属性会将元数据发送到处理程序，从而可以根据条件和每行/单元格更改元数据？

4

2 回答 2

1

我认为如果您手动设置usingDefaultRenderer为 true，您将能够使用渲染器并调用defaultRenderer来渲染值。

小提琴：https ://fiddle.sencha.com/#view/editor&fiddle/2ftg

Ext.define(null, {
    override: 'Ext.grid.column.Number',
    usingDefaultRenderer: true
});

Ext.create('Ext.data.Store', {
    storeId: 'employeeStore',
    fields: ['firstname', 'lastname', 'seniority', 'dep', 'hired'],
    data: [{
        firstname: "Michael",
        lastname: "Scott",
        seniority: 7,
        dep: "Management",
        hired: "01/10/2004"
    }, {
        firstname: "Dwight",
        lastname: "Schrute",
        seniority: 2,
        dep: "Sales",
        hired: "04/01/2004"
    }, {
        firstname: "Jim",
        lastname: "Halpert",
        seniority: 3,
        dep: "Sales",
        hired: "02/22/2006"
    }, {
        firstname: "Kevin",
        lastname: "Malone",
        seniority: 4,
        dep: "Accounting",
        hired: "06/10/2007"
    }, {
        firstname: "Angela",
        lastname: "Martin",
        seniority: 5,
        dep: "Accounting",
        hired: "10/21/2008"
    }]
});

Ext.create('Ext.grid.Panel', {
    title: 'Column Demo',
    store: Ext.data.StoreManager.lookup('employeeStore'),
    columns: [{
        text: 'First Name',
        dataIndex: 'firstname'
    }, {
        xtype: 'numbercolumn',
        text: 'Seniority',
        dataIndex: 'seniority',
        renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
            return this.defaultRenderer(value);
        }
    }, {
        text: 'Hired Month',
        dataIndex: 'hired',
        xtype: 'datecolumn',
        format: 'M'
    }, {
        text: 'Department (Yrs)',
        xtype: 'templatecolumn',
        tpl: '{dep} ({seniority})'
    }],
    width: 400,
    forceFit: true,
    renderTo: Ext.getBody()
});
于 2018-04-21T02:03:17.797 回答
1

您的问题可能是XY 问题，所以让我先回答您的根本问题。

如果只是行号，则不会使用函数的meta参数renderer。

getRowClass由于您的颜色是固定的，因此使用这样的方法更加容易：

xtype: 'grid',
viewConfig: {
    getRowClass: function(record, rowIndex, rowParams, store){
        if (!record.get('LineNum')) return "";
        if(!Ext.isArray(this.ownerGrid.warningLineArr)) return "";
        if(this.ownerGrid.warningLineArr.indexOf(record.get('LineNum'))>-1) return "warning-row";
        return "";
    }
}

然后你会定义一个带有颜色的 CSS 类：

.warning-row td {
    background-color: rgba(255, 184, 77, 0.25);
}

相关的小提琴首先还包含对您问题的答案。以防万一您在单个单元格的其他地方需要它，它具有以下覆盖，可在使用默认渲染器时更新单元格的元信息：

Ext.define('MyOverride', {
    override: 'Ext.grid.column.Column',
   initComponent: function() {
       var me = this;
       if(me.defaultRenderer) {
           var oldRenderer = me.defaultRenderer
           me.defaultRenderer = function() {
               if(this.updateMeta) this.updateMeta.apply(this, arguments);
               return oldRenderer.apply(this, arguments);
           };
       }
       return me.callParent(arguments);
   } 
});
于 2018-04-21T04:04:37.327 回答