JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" type="text/css" href="//cdn.sencha.io/ext-4.1.0-gpl/resources/css/ext-all-debug.css"
/>

JavaScript

var data = [{
    id: 1,
    name: 'Cellphone',
    price: 20
}, {
    id: 2,
    name: 'Book',
    price: 6
}, {
    id: 3,
    name: 'Laptop',
    price: 50
},

];


Ext.define('Product', {
    extend: 'Ext.data.Model',
    fields: [{
        name: 'id',
        type: 'int'
    }, {
        name: 'name',
        type: 'string'
    }, {
        name: 'price'
    }],
});

Ext.create('Ext.data.Store', {
    storeId: 'Products',
    model: "Product",
    data: data,
    autoLoad: true,
    proxy: {
        type: 'memory',
        reader: {
            type: 'json'
        }
    }
});

var button = Ext.create('Ext.Button', {
    text: 'Change Price Header'
});


var grid = Ext.create('Ext.grid.Panel', {
    title: 'Products',
    renderTo: Ext.getBody(),
    store: Ext.getStore('Products'),
    columns: [{
        text: 'Price',
        dataIndex: 'price',
        flex: 1,
        sortable: true
    }, {
        text: 'Name',
        dataIndex: 'name',
        flex: 1,
        sortable: true
    }

    ],
    dockedItems: [{
        xtype: 'toolbar',
        dock: 'bottom',
        border: false,
        items: [button]
    }]
});

var priceColumnIndex = 2;

button.on({
    click: function(button){
        grid.getView().getHeaderAtIndex(priceColumnIndex).setText('Priceeeeee');
    }
});