In this 2nd post I will be enhancing the grid we
created in the previous post.
How about adding row numbers to our view? We modify the
columns array to hold a new member.
columns: [
new
Ext.grid.RowNumberer(),
{id:'company',header: 'Last Name', width: 100, sortable:
true, dataIndex: 'last_name'},
{header: 'First Name', width: 100, sortable: true,
dataIndex: 'first_name'},
{header: 'Age', width: 75, sortable: true, dataIndex:
'age'},
{header:
'Date of Joining', width: 100, sortable: true, renderer:
Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'doj'}
]
Here’s the demo,
By default multiple
rows of the grid can be selected by holding down the “Ctrl” button. To disable
multi select of rows add the following selection model to the grid.
sm: new Ext.grid.RowSelectionModel({ singleSelect:true })
Selecting multiple rows of a grid can be helpful. But to
provide a better visual treatment rather than highlighted rows use a
“CheckBoxSelectionModel”.
Here’s the modified grid code,
var sm = new
Ext.grid.CheckboxSelectionModel();
var grid = new
Ext.grid.GridPanel({
store:
empStore,
columns: [
sm, //this is to provide the checkbox for every
row
new
Ext.grid.RowNumberer(),
{header:
'Last Name', width: 100, sortable: true, dataIndex: 'last_name'},
{header:
'First Name', width: 100, sortable: true, dataIndex: 'first_name'},
{header:
'Age', width: 75, sortable: true, dataIndex: 'age'},
{header:
'Date of Joining', width: 100, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'doj'}
],
sm: sm, //sm is short for “selModel”
stripeRows: true,
height: 350,
width: 430,
title: 'Employee Details',
renderTo: Ext.getBody()
});
Demo below,
