A Column definition class which renders color. I have used Ext.ux.colorpick.Field. Nothing special, just extended the ‘Ext.grid.column.Template‘. It is also possible to implement using widget column nut I prefer the simplest way always.

The Color column has a following view. You can change the color view div box style to your design or/and add some dynamic visual properties.

Ext.define('ux.grid.column.Color', {
    extend: 'Ext.grid.column.Template',
    alias: ['widget.colorcolumn'],
    requires: [
    editor: {
        xtype: 'colorfield',
        listeners: {
            focus: function (field) {

    initComponent: function () {
        this.tpl = Ext.XTemplate('<div style="background-color: #{' + this.dataIndex + '}; border: 1px solid #99bce8; width: 16px; height: 16px;"></div>');


and the usage in column model:

    xtype: 'colorcolumn',
    text: "Color Column",
    dataIndex: 'color'


Fiddle Link