基于ExtJS Grid創建Table例子

基本思路：

基于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         }    
 }); });

Hello Ext