ExtJS 6.0 - Color Picker

by henryDev

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all-debug.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/theme-neptune-debug.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all_1.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all_2.css">
<!-- ExtJS 6.0 - Template -->
<!-- Images: http://imgur.com/a/BPZwm -->

JavaScript

Ext.define('UserModal', {
     extend: 'Ext.data.Model',
     fields: ['name']
 });
 
 var store = Ext.create('Ext.data.Store', {
    fields: ['name'],
    groupField: 'status',
    data: [
{
        "name": "Henry Watson"
    }, {
        "name": "Lucy"
    }, {
        "name": "Mike Brow"
    }, {
        "name": "Mary Tempa"
    }, {
        "name": "Beto Carlx"
    }

    ]
});

 Ext.onReady(function () {

     // Setting up the Grid
     Ext.create('Ext.grid.Panel', {
         store:store,
         listeners: {

         },
         columns: [ {
             header: 'NAME',
              renderer: function (val, metadata, record) {
                var recordName = record.get('name');
                if (recordName === "Beto Carlx") {
                   return "TEST"; 
                }
                
                return recordName;
            },
             dataIndex: 'name',
         }],
         height: 300,
         width: 400,
         renderTo: document.body
     });
 });