无法理解字段ExtJS6.2的呈现程序

Question

我在ExtJS和JS方面都很新。

我有一个Ext.Grid和应该显示月份和年份的列，例如“2019年8月”。

通过添加一个新列，月份应该减少，因此结果应该是:第一次添加:2019年8月第二次添加:2019年7月3d添加:2019年6月

我还提供了一个小部件，用于按月和一年从这里选择数据：EXTJS 5 - Date picker year and month only

也许我应该提供更多的代码，或者你能建议我应该学些什么吗？

 dataIndex: 'picker',
...

renderer: function (value, cell, record) {
            if (!value && record.get('year') && record.get('month')) {
                value = new Date(record.get('year'), record.get('month') - 1);
                record.set('picker', value);
            }
            return Ext.Date.format(value, 'M, Y');

现在，月份在增加，而不是减少。

Answer 1

renderer函数在ExtJS中仅仅是一个函数，对于给定的列，对网格中的每一行都调用该函数。此函数的输出用于在网格的特定单元格内呈现文本。

如果您想要做的是允许动态地向网格中添加列，并且与前一个月相比，新列的值为“减1”，那么您需要做的是构建一个带有特定附加参数的呈现器，例如可以使用JavaScript的bind方法。每次添加列时，都会创建这样的呈现器实例，传递不同的值。

下面的StackOverflow帖子将提示您如何使列动态：

How to dynamically add columns for Grid ExtJs

至于renderer函数及其用法，大致如下：

function customRenderer(value, cell, record) {
    var result = value - this.index;
    return value + " - " + this.index + ' = ' + result;
}

var columns = [];
for(var i = 0; i < 10; i++) {
    var column = {};
    column.dataIndex = 'column' + i;
    column.text = 'Column ' + i;
    column.renderer = customRenderer.bind({ index: i, column: column });
}

reconfigureExtJSColumnsPseudoFunction(columns);

当然，上面的代码将根据您的需要进行调优，使用customRenderer函数并更改其作用域，从而允许您为它提供额外的上下文。for循环中的每一次迭代都将创建运行在不同作用域(通过bind方法)中的该函数的新“版本”，从而确保每一列将收到index属性的不同值，从而允许您根据列索引本身动态更改减去的数量。