ExtJS Simple Grid

ExtJS Simple Grid

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
});
var grid = new Ext.grid.GridPanel({
	store: empStore,
	columns: [
		{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'}
	],
	stripeRows: true,
	height: 350,
	width: 400,
	title: 'Employee Details',
	renderTo: Ext.getBody()
});