基本思路：

基于ExtJS4.1版本开发，主要是首先创建一个Data Model组件，mockup一些JSON数据

然后将data Model与JSON数据绑定到创建的data store中，最后创建grid组件同时绑定

之前的data store完成整个程序。


一个简单ExtJS组件结构图：


程序运行结果如下：


JavaScript部分的源代码如下：

Ext.require([     'Ext.grid.*',     'Ext.data.*',     'Ext.util.*',     'Ext.state.*' ]);  Ext.onReady(function() { 	// mock up data 	// sample static data for the store     var myData = [         ['gloomyfish',	31, 'M',  'software',  '09 July 1980'],         ['Mike',	31, 'M',  'software',  '09 July 1984'],         ['Green Mook',	31, 'M',  'software',  '09 July 1980'],         ['Rose Kate',	25, 'F',  'software',  '09 July 1987'],         ['Dave Wu',		28, 'M',  'software',  '24 July 1984'],         ['Hong Naa',	31, 'M',  'software',  '09 July 1980']     ];          // create data model     Ext.define('EmplyeeInfo', {         extend: 'Ext.data.Model',         fields: [            {name: 'employee', type: 'string'},            {name: 'age',      type: 'int'},            {name: 'gentle',    type: 'string'},            {name: 'department',  type: 'string'},            {name: 'birthday', type: 'date', dateFormat: 'd F Y'}         ],     });      	// create the data store     var store = Ext.create('Ext.data.ArrayStore', {     	model: 'EmplyeeInfo',         data: myData     });          // create the Grid     var grid = Ext.create('Ext.grid.Panel', {         store: store,         columns: [             {                 text     : 'Employee Name',                 flex     : 1,                 sortable : false,                 dataIndex: 'employee'             },             {                 text     : 'Age',                 width    : 75,                 sortable : true,                 dataIndex: 'age'             },             {                 text     : 'Gentle',                 width    : 75,                 sortable : true,                 dataIndex: 'gentle'             },             {                 text     : 'Department',                 width    : 75,                 sortable : true,                 dataIndex: 'department'             },             {                 text     : 'Birthday Date',                 width    : 85,                 sortable : true,                 renderer : Ext.util.Format.dateRenderer('m/d/Y'),                 dataIndex: 'birthday'             }         ],         height: 350,         width: 600,         title: 'Employee Information Table',         renderTo: 'grid-example',         viewConfig: {             stripeRows: true         }     }); });
HTML部分的源代码如下： 

      Hello Ext                            
My Fist Grid Table - ExtJS 4.1
 
This example shows how to create a grid from Array data.
在google chrome上测试通过。运行本程序前请下载ExtJS 4.1开发包。