@{
    ViewBag.Title = "Grid";
}
<h2>Grid</h2>
<h2 style="width: 500px; font-size: 30px; color: #157FCC;">Sencha Touch</h2>
<link href="~/ext-6.0.2/build/classic/theme-neptune/resources/theme-neptune-all.css" rel="stylesheet" /> 
<script src="~/ext-6.0.2/build/ext-all.js"></script>
 <script>
     Ext.define('User', {
         extend: 'Ext.data.Model',
         fields: ['name', 'email', 'phone']
     });
     var userStore = Ext.create('Ext.data.Store', {
         model: 'User',
         data: [
             { name: 'Aditya Kumar', email: 'aditya@gmail.com', phone: '333-333-1234' },
             { name: 'Suraj Kumar', email: 'suraj@gmail.com', phone: '444-222-4325' },
             { name: 'Sohel Kumar', email: 'sohel@gmail.com', phone: '888-777-6789' },
             { name: 'Rajeev Patel', email: 'r4ajeev@gmail.com', phone: '666-999-1234' }
         ]
     });
     Ext.create('Ext.grid.Panel', {
         renderTo: document.body,
         store: userStore,
         width: 450,
         height: 200,
         title: 'Application Users',
         columns: [
             {
                 text: 'Name',
                 width: 150,               
                 dataIndex: 'name'
             },
             {
                 text: 'Email Address',
                 width: 150,
                 dataIndex: 'email',              
             },
             {
                 width: 150,
                 text: 'Phone Number',
                 flex: 1,
                 dataIndex: 'phone'
             }
         ]
     });
 </script>