ExtJS Gridに基づいてTableを作成する例


基本的な考え方:
ExtJ S 4.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 パッケージをダウンロードしてください.