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

Question

I can use the colorbutton in a toolbar, for example. When I click on it, the click event shows the color picker.

But I would like to have it inside a grid, to configure the color for each element of the grid.

I've added a column to the grid with:

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

The problem is the event on the grid. It requires a callback onClick on the controller. The click event goes to the controller, not to the colorbutton.

I would like to trigger the onClick event of the colorbutton to display the picker.

In the image below, is my grid. Clicking on the button on the grid does not workm while clicking on the toolbar works fine, as expected.

Documentation: https://docs.sencha.com/extjs/6.2.0/guides/components/widgets_widgets_columns.html

Answer 1

I would suggest to use template column to represent the color. Something like this:

...
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();
            }
        }
    }
}, {
...
...
}],
...

Or you can use custom color column.

Answer 2

The anwer provided by Arthur Rubens solves the problem.

I've ended up with similar solution, using a widgetcolumn. Editing th field with this alternative approach is smoother (less one click and the user never sees the combobox).

Ths print screen includes the two solutions. For the Background 1 column, I used Arthur's solution, based on a templatecolumn.

For this alternative solution, I used the following code:

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

And in the controller:

    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 available, based on Arthur's fiddle.