绑定前格式化存储中的数据

Question

我的商店有这样的数据：

名称："black"，颜色："RGB: 0, 0, 0"

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

Answer 1

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

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

Answer 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

绑定前格式化存储中的数据

Format data from store before binding

extjs

extjs6