JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://dev.sencha.com/deploy/ext-3.4.0/resources/css/ext-all.css">
<div id="grid-container"></div>

CSS

.delete-icon {
    width: 2em;
    height: 2em;
    background: blue;
}

JavaScript

Ext.onReady(function () {
  var myData = [[ 'Lisa', "lisa@simpsons.com", "555-111-1224"],
                [ 'Bart', "bart@simpsons.com", "555-222-1234"],
                [ 'Homer', "home@simpsons.com", "555-222-1244"],
                [ 'Marge', "marge@simpsons.com", "555-222-1254"]];
 
  var store = new Ext.data.ArrayStore({
    fields:[ {
      name: 'name'
    },
    {
      name: 'email'
    },
    {
      name: 'phone'
    }],
    data: myData
  });
  var grid = new Ext.grid.GridPanel({
    renderTo: 'grid-container',
    columns:[ {
      header: 'Name',
      dataIndex: 'name'
    },
    {
      header: 'Email',
      dataIndex: 'email'
    },
    {
      header: 'Phone',
      dataIndex: 'phone'
    },
    {
        header: 'action',
        xtype: 'actioncolumn',
        iconCls: 'delete-icon',
        text: 'Delete',
        name: 'deleteBtn',
        handler: function(grid, rowIndex, colIndex, item, e) {
            alert('deleted');
        }      
    },             
    /*I cannot add this column
    {
        header: 'action',
        xtype: 'button',
        text: 'update',
        name: 'btnSubmit'
    }*/
    ],
    store: store,
    frame: true,
    height: 240,
    width: 500,
    title: 'Framed with Row Selection',
    iconCls: 'icon-grid',
    sm: new Ext.grid.RowSelectionModel({
      singleSelect: true
    })
  });
});