05
Mar
11

Displaying Data on an extJS Grid


This page describes how to display JSON data from an Ajax call on a extjs grid panel.

Requirements

  • html editor
  • Access to a HTTP Server

Start in an empty directory and create the following file.

index.html

<html>
<head>

<link rel="stylesheet" type="text/css"
    href="http://dev.sencha.com/deploy/ext-3.3.1/resources/css/ext-all.css"/>

<script type="text/javascript"
    src="http://dev.sencha.com/deploy/ext-3.3.1/adapter/ext/ext-base-debug.js">
</script>
<script type="text/javascript"
    src="http://dev.sencha.com/deploy/ext-3.3.1/ext-all-debug.js">
</script>

<script type="text/javascript">

function buildWindow() {

var grid = new Ext.grid.GridPanel({
	title : 'Name State Grid',
	store : new Ext.data.JsonStore({
		url: 'response1.do',
		autoLoad : 'true',
		totalProperty: 'totalCount',
		id : 'state',
		root: 'records',
		fields: ['state', 'fullName']
	}),
	autoHeight : true,
	cm : new Ext.grid.ColumnModel( [ {
        header : 'Full Name',
        sortable : true,
        dataIndex : 'fullName'
    }, {
        header : 'State',
        sortable : true,        
        dataIndex : 'state'
    } ]),
	renderTo : Ext.getBody()
});

}
Ext.onReady(buildWindow);
</script>
 
</head>
<body>
</body>
</html>

response1.do

{ 
"totalCount" : "4",
"records" : [
    {"state":"NY","fullName":"Ester Jones"},
    {"state":"NJ","fullName":"Bob Smith"},
    {"state":"NY","fullName":"John Adams"},
    {"state":"CA","fullName":"John Doe"}
]}
Advertisements

0 Responses to “Displaying Data on an extJS Grid”



  1. Leave a Comment

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 77 other followers

March 2011
S M T W T F S
« Feb   Apr »
 12345
6789101112
13141516171819
20212223242526
2728293031  

Blog Stats

  • 830,829 hits

%d bloggers like this: