@{
    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>