ExtJS 6 - 小部件列上带有颜色按钮的网格 - 单击事件转到控制器

Question

例如，我可以在工具栏中使用 colorbutton。当我点击它时，点击事件显示颜色选择器。

但我想把它放在网格中，为网格的每个元素配置颜色。

我在网格中添加了一列：

            {
                xtype: "widgetcolumn",
                width: 60,
                widget: {
                    xtype: 'colorbutton'
                }
            }

问题是网格上的事件。它需要控制器上的回调onClick。单击事件转到控制器，而不是 colorbutton。

我想触发 colorbutton 的 onClick 事件来显示选择器。

在下图中，是我的网格。按预期单击工具栏上的按钮时单击网格上的按钮不起作用。

文档：https://docs.sencha.com/extjs/6.2.0/guides/components/widgets_widgets_columns.html

Answer 1

我建议使用模板列来表示颜色。像这样：

...
columns: [{
...
...
}, {
    xtype: 'templatecolumn',
    text: "Template Color Column",
    flex: 1,
    dataIndex: 'color',
    tpl: '<div style="background-color: #{color}; border: 1px solid #99bce8; width: 16px; height: 16px;"></div>',
    editor: {
        xtype: 'colorfield',
        listeners: {
            focus: function (field) {
                field.expand();
            }
        }
    }
}, {
...
...
}],
...

或者您可以使用 custom color column.

Answer 2

Arthur Rubens 提供的答案解决了这个问题。

我最终得到了类似的解决方案，使用 widgetcolumn。使用这种替代方法编辑字段更加顺畅（只需单击一次，用户永远不会看到组合框）。

打印屏幕包括两个解决方案。对于背景 1 列，我使用了 Arthur 的解决方案，基于 templatecolumn.

对于这个替代解决方案，我使用了以下代码：

, {
            text: 'Background 2',
            xtype: "widgetcolumn",
            width: 120,
            dataIndex: 'color',
            widget: {
                xtype: 'colorfield',
                hideTrigger: true,
                bind: '{record.color}',
                listeners: {
                    afterrender: 'afterrenderColorPickerField'
                }
            }
        },

在控制器中：

    afterrenderColorPickerField: function (color_picker_field) {
        // console.log('afterrenderColorPickerField');
        if (color_picker_field.inputEl && color_picker_field.inputEl.dom) {
            color_picker_field.inputEl.dom.style.backgroundColor = "#" + color_picker_field.getValue();
            color_picker_field.inputEl.dom.style.color = "#" + color_picker_field.getValue();
        }
        color_picker_field.addListener('change', this.colorChanged, this);
    },

    colorChanged: function (color_picker_field, new_value, old_value) {
        // console.log('colorChanged to ' + new_value);
        // var record = color_picker_field.getWidgetRecord();
        // record.set('style', new_value);
        if (color_picker_field.inputEl && color_picker_field.inputEl.dom) {
            color_picker_field.inputEl.dom.style.backgroundColor = "#" + new_value;
            color_picker_field.inputEl.dom.style.color = "#" + new_value;
        }
    },

Fiddle 可用，基于 Arthur 的 fiddle。

ExtJS 6 - 小部件列上带有颜色按钮的网格 - 单击事件转到控制器

ExtJS 6 - Grid with colorbutton on widgetcolumn - click event goes to the controller

extjs