How to create a rectangle inside each grid's column in Extjs?

Question

I have this grid and would like to put all of the values from Box column inside a rectangle using metadata.style , tdCls or CSS . My issue is that I don't want to color the entire column (cell), I only want to color the value inside of it by wrapping it in a rectangle, and if the value of the column is empty then just show an empty rectangle. Here's an example of what I want for each column (cell) to look like under the Box column :

Here's the working code : FIDDLE

       switch(recordStatus) {
         case 'Checked-In':
            backgroundColor = "#B4B4D6";
            metadata.style = 'background-color: ' + backgroundColor + ';';
            return val; 
            break;
             ...
        }

Thank you so much in advance!

Answer 1

You need to return html from your renderer method and provide style as per you requirement.

In this FIDDLE , I have modified some changes in your code as per you requirement. I hope it is same as per your requirement.

JS code

var data = Ext.decode('[{"box":"","name":"Brady, Marsha","status":"Checked-In"},{"box":"MA","name":"Dwight, Schrute","status":"With MA"},{"box":"MA","name":"Jim, Halpert","status":"With MA"},{"box":"MA","name":"Mike, Brown","status":"With MA"},{"box":"MA","name":"Steve, Smith","status":"With MA"},{"box":"MA","name":"Lori, Morrison","status":"With MA"},{"box":"MA","name":"Mary, Loson","status":"With MA"},{"box":"MA","name":"Junior, Meloni","status":"With MA"},{"box":"MA","name":"Jim, Halpert","status":"With MA"},{"box":"","name":"Kevin, Malone","status":"Checked-In"},{"box":"","name":"Angela, Martin","status":"Checked-In"},{"box":"2","name":"Jim, Halpert","status":"Ready for MA"},{"box":"2","name":"Kevin, Malone","status":"Ready for MA"},{"box":"2","name":"Angela, Martin","status":"Ready for MA"}]'),//Store Data
    //Create store
    store = Ext.create('Ext.data.Store', {
        fields: ['name', 'box', 'status'],
        data: data,
        groupField: 'status'
    }),
    //create grid
    grid = Ext.create('Ext.grid.Panel', {
        height: 450,
        frame: true,
        title: 'Sponsored Projects',
        iconCls: 'icon-grid',
        renderTo: document.body,
        store: store,
        features: [{
            ftype: 'grouping',
        }],
        columns: [{
            text: 'Box',
            renderer: function (val, metadata, record) {
                var recordStatus = record.get('status'),
                    style = 'border:1px solid #cccccc';
                if (val) {
                    switch (recordStatus) {
                    case 'Checked-In':
                        style = "background-color:#B4B4D6";
                        break;
                    case 'With MA':
                        style = "background-color:#CBC5EB";
                        break;
                    case 'Ready for MA':
                        style = "background-color:#E3E1ED";
                        break;
                    default:
                        style = '';
                    }
                }
                metadata.style = "text-align: center;";
                return `<div class="x-box-div" style="${style}">${val}</div>`
            },
            dataIndex: 'box',
            flex: 0.5
        }, {
            text: 'Name',
            renderer: function (value, metaData) {
                return value.replace(value, '<u><b>' + value.toUpperCase() + '</b></u>');
            },
            dataIndex: 'name',
            flex: 2
        }, {
            text: 'Status',
            dataIndex: 'status',
            flex: 1
        }]
    });

CSS code

<style>
    .x-box-div {
        min-width: 30px;
        min-height: 30px;
        text-align: center;
        display: inline-block;
        vertical-align: middle;
        padding: 10px 0;
        max-height: 30px;
    }

</style>

Answer 2

This worked for me

renderer: function (v,meta) {                                    
   meta.tdCls = '***your icon with css***';
     }