HOW TO USE EXTJS GRID .

Ankit Singh

Total Post:341

Points:2389
Posted by  Ankit Singh
JQuery 
 520  View(s)
Ratings:
Rate this:
We want to use ext js Grid . how to use this please help me.
  1. aditya kumar Patel

    Post:254

    Points:1810
    Re: How to use ExtJs Grid .

    @{

    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>

     

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!