绑定前从存储中格式化数据答案

【问题标题】：Format data from store before binding绑定前从存储中格式化数据
【发布时间】：2017-07-05 06:15:18
【问题描述】：

我的商店有这样的数据：

名称：“黑色”，颜色：“RGB：0,0,0”

现在我想创建一个显示数据的网格，其中包含一个显示颜色缩略图的额外列。基本上只是一个带有背景颜色的小方块。我知道有 tpl 和渲染器，但文档建议使用绑定。那么如何使用 bind 转换 store 中的字段呢？有 Ext.util.Format，我可以通过组合几个格式化程序来使其工作，但如果我可以使用自己的函数会更干净。

【问题讨论】：

请至少提供一些您已经使用的代码，或者最好提供一个小提琴。

标签： extjs extjs6

【解决方案1】：

您要做的第一件事是以css 接受的格式生成颜色值。为此，您可以使用Ext.data.field.Field 的calculate 方法。还有很多其他方法可以做到这一点。

Ext.define('Color', {
    extend: 'Ext.data.Model',
    fields: [{
        name: 'color',
        type: 'string'
    }, {
        name: 'displayColor',
        type: 'string',
        calculate: function (data) {

            var color = data.color;
            //parse your value to CSS Colors here
            return '#FF0000';
        }
    }]
});

要在列中显示背景颜色，我将创建一个新的列小部件。这将负责绘制单元格。

Ext.define('Ext.ux.BackgroundVisualize', {
    extend: 'Ext.Gadget',
    xtype: ['myBackgroundwidget'],

    template: [{
        reference: 'backgroundEl'
    }],

    defaultBindProperty: 'value',

    setValue: function (value, oldValue) {
        this.el.up('td').setStyle('background', value);
    }
});

这个新的小部件只能用作网格中的一列。

{
    text: 'Preview',
    xtype: 'widgetcolumn',
    widget: {
        xtype: 'myBackgroundwidget',
        bind: '{record.displayColor}'
    }
}

这是完整的例子：

https://fiddle.sencha.com/#view/editor&fiddle/22ln

【讨论】：

IMO，因为该值是一个显示值，它不属于模型上的计算字段，而应该是UI的关注点。此外，一个小部件列可能只是为此而大材小用。
我最终将商店中的颜色存储为十六进制。然后我使用 convert 将其显示为列中的 RGB，并使用小部件列显示拇指。我决定使用小部件，因为我还必须在几个不同的地方使用颜色拇指。另请注意，bind: '{record.displayColor}' 仅适用于 6.2 及更高版本。对于 6.0，我必须使用 dataIndex。

【解决方案2】：

这是基于现有答案的替代版本。这是一个更简单的版本，它使用列渲染器来显示值。对于这种用途，小部件列可能有点重。 YMMV，取决于您的需求。

Ext.application({
    name: 'Fiddle',

    launch: function () {
        new Ext.grid.Panel({
            renderTo: Ext.getBody(),
            store: {
                data: [{
                    name: 'red',
                    color: 'RGB: 255, 0, 0'
                }]
            },
            columns: [{
                text: 'Name',
                dataIndex: 'name'
            }, {
                text: 'Color',
                dataIndex: 'color',
                flex: 1
            }, {
                text: 'Preview',
                renderer: function (v, meta, rec) {
                    var color = rec.get('color');
                    // Parse model value into displayable color
                    return '<div style="width: 100%; height: 1em; background-color: #FF0000;"></div>';
                }
            }]
        });
    }
});

Fiddle

【讨论】：