时间戳

首页 > 解决方案 > 无法理解字段 ExtJS6.2 的渲染器

javascript - 无法理解字段 ExtJS6.2 的渲染器

问题描述

我对 ExtJS 和 JS 都很陌生。

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

通过添加一个新列，月份应该递减，所以结果应该是：第一次添加：2019 年 8 月第二次添加：2019 年 7 月第三次添加：2019 年 6 月 ...

我还有一个小部件，用于从此处仅按月份和年份选择数据： EXTJS 5 - 仅日期选择器年份和月份

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

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

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

标签： javascriptextjs

解决方案

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

如果您想要做的是允许向网格动态添加列，并且新列的月份值与上个月相比“减 1”，那么您需要做的是构建一个具有某些特定功能的渲染器附加到它的附加参数，例如，您可以使用 JavaScript 的bind方法来执行此操作。每次添加列时，都会创建此类渲染器的实例，并传递不同的值。

以下 StackOverflow 帖子将为您提供有关如何使列动态化的提示：

如何为 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属性值，从而允许您动态更改您将减去的数量基于列索引本身。

推荐阅读