The Columns property in the Grid panel is for defining which columns the grid will have, show, hide, and so on. The Columns property can be an array of configuration objects or just a configuration object.
By default, each column is sortable, and also each column header has a menu that shows up when we click on the right-hand side of the column header. The column's menu lets us sort data and show or hide columns on the grid. Now take a look at the following screenshot:
Ext JS offers many types of columns, and all are located under the Ext.grid.column namespace. In the next code, we are going to explain how the basic types of column work by modifying the code, as shown here:
columns: [{
xtype: 'rownumberer'
},{
xtype: 'numbercolumn',
width: 70,
dataIndex: 'id',
text: 'Id',
format: '0' //0,000.00
},{
xtype: 'templatecolumn',
text: 'Country',
tpl: '<div><div class="flag_{[values.country.toLowerCase()]}">' + ' </div> {country...