How to create ExtJS editable grid column indication using fontawesome 'fa fa-edit'

Question

I started learning ExtJS recently.I created a grid with columns(names,email , phone) and added some dummy data using store. Here column -("names") is editable column. when user sees that grid , he should come to know that (names) column is editable. For this I needed to add edit symbol( iconCls: 'fa fa-edit' fontawesome) to the right side of data in each column under "names" header,so that user can come to know that that column is editable.How can I achieve this.Please help me with this,I tried a lot but did not found a solution.Thanks in advance.

ExtJS grid code:

Ext.define('FirstApp.view.main.List', { extend: 'Ext.grid.Panel', xtype: 'mainlist', columnLines: true,

requires: [
    'FirstApp.store.Personnel',
    'Ext.grid.filters.Filters'
],

title: 'Personnel',
collapsible: true,
iconCls: 'icon-grid',
frame: true,
width: 700,
height: 500,
resizable: true,
plugins: 'gridfilters',
emptyText: 'No Matching Records',
loadMask: true,
stateful: true,
stateId: 'stateful-filter-grid',

store: {
    type: 'personnel',
    autoLoad: true,
    autoDestroy: true
},
tbar: [{
    text: 'Show Filters...',
    tooltip: 'Show filter data for the store',
    handler: 'onShowFilters'
}, {
    text: 'Clear Filters',
    tooltip: 'Clear all filters',
    handler: 'onClearFilters'
}],

columns: [
    { text: 'Name',  dataIndex: 'name',flex:1,
        align: 'center',
        editor: {
            xtype: 'textfield',
            allowBlank: false
        },
        filter: {
type: 'string',
    itemDefaults: {
    emptyText: 'Search for...'
} }},
    { text: 'Email', dataIndex: 'email', flex: 1,filter: {
        type: 'string',
        itemDefaults: {
            emptyText: 'Search for...'
        } }},
    { text: 'Phone', dataIndex: 'phone', flex: 1 }
],
selType: 'cellmodel',
plugins: [
    Ext.create('Ext.grid.plugin.CellEditing', {
        clicksToEdit: 1
    })
]

});

refer Grid image with arrowd indication where that editable fontawesome should appear

Answer 1

I found solution for this problem.

To which column we want to add edit image on the rightside of data it gets from store,so as to indicate that it is a editable column. 1). make the column firstly as "widgetcolumn" and make the changes in grid as follows:

//grid column code example:

columns: [
        { text: 'Name',
            dataIndex: 'name',
            width: 200,
            xtype: 'widgetcolumn',
            cls:'x-button-default-small-cell > .x-grid-cell-inner >.x-btn-default-small',
            sortable: true,
            widget:{
            textAlign:'left',
                iconCls:'x-fa fa-edit',
                iconAlign: 'right',
                xtype:'button',
                handler: function(btn) {
                    var rec = btn.getWidgetRecord();
                }
            },
            align: 'center',
            editable:true,
            editor: {
                xtype: 'textfield',
                allowBlank: false
            },
            filter: {
    type: 'string',
        itemDefaults: {
        emptyText: 'Search for...'
    } }}]

2). changes in css file to change color of button

.x-button-default-small-cell > .x-grid-cell-inner >.x-btn-default-small {
    vertical-align: top;
    border-color: transparent;
    background-color: transparent;


}

3). refer image of grid after changes