Selection models

So far, we have seen how to create a basic grid and set the columns for displaying data. Selection models are an important part of the Grid panel, because they will let us set the manner in which we can interact in terms of selections (data selection) in the grid's view.

The two main selection models on the framework are Ext.selection.RowModel, where single or multiple rows are selected, and Ext.selection.CellModel, where individual grid cells are selected.

By default, the Grid panel uses rowmodel when it's not defined (as in our previous examples).

In the next example code, we need to use the code in which we set the action column icons, and make some changes (first of all, make a duplicate of the code). In the grid configuration, let's add the selModel property:

selModel:{
  selType:'rowmodel',
  mode:'SINGLE'
}

The mode property can have one of these three values:

• SINGLE: This allows selection of one item at a time

• SIMPLE: This allows us to make a simple selection of multiple...