Sample ExtJS Grid

by Venkadeshwaran T.S

HTML

<link rel="stylesheet" href="http://cdn.sencha.com/ext/gpl/4.2.0/resources/css/ext-all.css">

JavaScript

Ext.define('User', {
	extend: 'Ext.data.Model',
	fields: [
		{ name: 'name', type: 'string' },
		{ name: 'email', type: 'string' },
		{ name: 'phone', type: 'string' },
		{ name: 'Married', type: 'boolean', defaultValue: false }
	]
});

var userStore = Ext.create('Ext.data.Store', {
	model: 'User',
	data: [
        { name: 'Lisa', email: '[email protected]', phone: '555-111-1224', Married: true },
        { name: 'Bart', email: '[email protected]', phone: '555-222-1234', Married: true },
        { name: 'Homer', email: '[email protected]', phone: '555-222-1244', Married: false },
        { name: 'Marge', email: '[email protected]', phone: '555-222-1254', Married: false }
	]
});

Ext.create('Ext.grid.Panel', {
	renderTo: document.body,
	store: userStore,
	width: 400,
	height: 200,
	title: 'Application Users',
	columns: [
        {
        	text: 'Name',
        	width: 100,
        	sortable: false,
        	hideable: false,
        	dataIndex: 'name'
        },
        {
        	text: 'Email Address',
        	width: 150,
        	dataIndex: 'email',
        	hidden: true
        },
        {
        	text: 'Phone Number',
        	flex: 1,
        	dataIndex: 'phone'
        },
        {
        	xtype: 'booleancolumn',
        	text: 'IsMarried',
        	flex: 1,
        	dataIndex: 'Married'
        }
	]
});