Tuesday, October 20, 2009

Building Simple Array Grid

First time i using Ext JS, i think how difficult to use this library. and at the first time i try to build my first grid i fail :D what i see is a blank page and i dont know what the error. but i am not give up :D, when i am surfing on the internet i found firebug. firebug is tools that integrates with Firefox. With this tool you can debug error in your javascript code. you can download firebug here
so, before we start this tutorial make sure you already install Firefox and firebug. and you already have the Ext JS library of course :). if you dont have the ExtJS library yet you can download here
lets start with the array grid (grid that the data is load from array). I use Ext-2.2 for this tutorial.
1. write the html first (array-grid.html)

<html>
<head>
<title>Array Grid Sample</title>

<link rel=”stylesheet” type=text/css” href=”ext-2.2/resources/css/ext-all.css” />
 

<script type=text/javascript” src=”ext-2.2/adapter/ext/ext-base.js”></script>
 

<script type=text/javascript” src=”ext-2.2/ext-all.js”></script>
 
code here ( see part 2 ) –>
<script type=text/javascript” src=”array-grid.js”></script>
</head>
 
<body>
 

<div id=”grid-example”></div>
</body>
</html>
 
2. write the javascript (array-grid.js)
make sure your code to build grid is inside this code:

Ext.onReady (function () {
// place your code here
});
 
here the javascript code:
// make sample array data
 
var myData = [
[’3m Co’,71.72,0.02,0.03,9/1 12:00am’],
[’Alcoa Inc’,29.01,0.42,1.47,9/1 12:00am’],
[’Altria Group Inc’,83.81,0.28,0.34,9/1 12:00am’],
[’American Express Company’,52.55,0.01,0.02,9/1 12:00am’],
[’American International Group, Inc.’,64.13,0.31,0.49,9/1 12:00am’],
[’AT&T Inc.’,31.61,-0.48,-1.54,9/1 12:00am’],
[’Boeing Co.’,75.43,0.53,0.71,9/1 12:00am’],
[’Caterpillar Inc.’,67.27,0.92,1.39,9/1 12:00am’],
[’Citigroup, Inc.’,49.37,0.02,0.04,9/1 12:00am’],
[’E.I. du Pont de Nemours and Company’,40.48,0.51,1.28,9/1 12:00am’],
[’Exxon Mobil Corp’,68.1,-0.43,-0.64,9/1 12:00am’],
[’General Electric Company’,34.14,-0.08,-0.23,9/1 12:00am’],
[’General Motors Corporation’,30.27,1.09,3.74,9/1 12:00am’],
[’Hewlett-Packard Co.’,36.53,-0.03,-0.08,9/1 12:00am’],
[’Honeywell Intl Inc’,38.77,0.05,0.13,9/1 12:00am’],
[’Intel Corporation’,19.88,0.31,1.58,9/1 12:00am’],
[’International Business Machines’,81.41,0.44,0.54,9/1 12:00am’],
[’Johnson & Johnson’,64.72,0.06,0.09,9/1 12:00am’],
[’JP Morgan & Chase & Co’,45.73,0.07,0.15,9/1 12:00am’],
[’McDonald\’s Corporation’,36.76,0.86,2.40,9/1 12:00am’],
[’Merck & Co., Inc.’,40.96,0.41,1.01,9/1 12:00am’],
[’Microsoft Corporation’,25.84,0.14,0.54,9/1 12:00am’],
[’Pfizer Inc’,27.96,0.4,1.45,9/1 12:00am’],
[’The Coca-Cola Company’,45.07,0.26,0.58,9/1 12:00am’],
[’The Home Depot, Inc.’,34.64,0.35,1.02,9/1 12:00am’],
[’The Procter & Gamble Company’,61.91,0.01,0.02,9/1 12:00am’],
[’United Technologies Corporation’,63.26,0.55,0.88,9/1 12:00am’],
[’Verizon Communications’,35.57,0.39,1.11,9/1 12:00am’],
[’Wal-Mart Stores, Inc.’,45.45,0.73,1.63,9/1 12:00am’]
];
 
// create the data store
var store = new Ext.data.SimpleStore({
fields: [
{name: ‘id’, type: ‘int’},
{name:name},
{name: ‘position’},
{name: ‘ambition’}
]
});
 
// load data
 
store.loadData(sampleData);
 
// create the grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{id:’id’,header: “ID”, width: 30, sortable: true, dataIndex: ‘id’},
{header:Name, width: 100, dataIndex:name},
{header: ‘Position’, width: 100, dataIndex: ‘position’},
{header: ‘Ambition’, width: 250, dataIndex: ‘ambition’}
],
stripeRows: true,
height:180,
width:500,
title:’Straw Hats Crew’
});
 
// render grid to the grid-example element (see p array-grid.html)
grid.render(’grid-example’); 

 

No comments: