Hide grid column in ExtJS

ExtJS is a Javacript based rich internet application (RIA) framework. One of the most useful feature of ExtJS is the grid feature.

The following is one way to declare a column in ExtJS grid.

columns: [
    xtype: 'gridcolumn',
    header: 'Date / Time',
    sortable: true,
    width: 120,
    dataIndex: 'time'
  //more columns

Using the above code, the column is created but user has the option to hide it by not selecting the column in the grid's column menu. Here's how column menu looks like in a sample application.

Un-check the Date / time checkbox and the column will not be displayed on the grid

To not show it by default when the application starts, add the following line to the column code when creating a grid

hidden: true

To completely disable the column, without the option to enable / show the column, add the following line as well.

hideable: false

The user now has no option to show the column.

Sign up for The Complete JavaScript Course: Build Real Projects! and many other great courses on Udemy to learn more.

Written by Mohd Shakir Zakaria. Last updated on 2019-02-12