ExtJS Simple Grid++

Adding row numbering and check box selection model

by Uzair Ahmed

HTML

<link rel="stylesheet" href="http://dev.sencha.com/deploy/ext-3.4.0/resources/css/ext-all.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/extjs/3.4.1-1/adapter/ext/ext-base.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/extjs/3.4.1-1/ext-all.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/extjs/3.4.1-1/resources/css/ext-all.css">

JavaScript

var empData = [{
    'last_name': 'Doe',
    'first_name': 'John',
    'age': '23',
    'doj': '08/06/2009'
}, {
    'last_name': 'Sparrow',
    'first_name': 'Jack',
    'age': '26',
    'doj': '08/12/2010'
}, {
    'last_name': 'Spacey',
    'first_name': 'Kevin',
    'age': '27',
    'doj': '01/23/2011'
}, {
    'last_name': 'Gates',
    'first_name': 'Bill',
    'age': '35',
    'doj': '10/10/2006'
}];

var empStore = new Ext.data.JsonStore({
    fields: [{
        name: 'last_name'
    }, {
        name: 'first_name'
    }, {
        name: 'age',
        type: 'int'
    }, {
        name: 'doj',
        type: 'date',
        dateFormat: 'm/d/Y'
    }],
    data: empData
});
//defining a checkbox selection model
var sm = new Ext.grid.CheckboxSelectionModel();
var grid = new Ext.grid.GridPanel({
    store: empStore,
    columns: [
    sm,
    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 aka selModel
    stripeRows: true,
    height: 300,
    width: 440,
    title: 'Employee Details',
    renderTo: Ext.getBody()
});