Sample ExtJS Grid

In the fiddle demo, I have included ExtJS 5.1.0 in the Frameworks and Extension section and in the External resources section added the following CSS Url,

http://cdn.sencha.com/ext/gpl/4.2.0/resources/css/ext-all.css 

Model

    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 }
    ]
});

Store

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

Grid Component

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: 'Boolean Field',
         flex: 1,
         dataIndex: 'Married'
        }
 ]
});

Result

Demo Click here to view in Jsfiddle