Question

我有一个包含这样数据的商店：

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

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

Answer 1

您要做的第一件事是以css接受的格式生成颜色值。为此，您可以使用calculate的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

绑定前格式化存储数据

2 个答案: