Home > DeveloperSection > Forums > How to use ExtJs Grid .
Ankit Singh

Total Post:341

Points:2389
Posted on    April-20-2016 10:30 PM

 JQuery JQuery 
Ratings:


 1 Reply(s)
 166  View(s)
Rate this:
We want to use ext js Grid . how to use this please help me.


aditya kumar Patel

Total Post:246

Points:1752
Posted on    April-20-2016 10:35 PM

@{

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>

 


Don't want to miss updates? Please click the below button!

Follow MindStick