ExtJS Gridに基づいてTableを作成する例
3857 ワード
基本的な考え方:
ExtJ S 4.1バージョンの開発に基づいて、まずData Modelコンポーネントを作成します.mockupにはJSONデータがあります.
そしてdata ModelとJSONデータを作成したdata storeに結びつけて、最後にgridコンポーネントを作成して同時に結合します.
前のdata storeはプログラム全体を完成しました.
簡単なExtJSコンポーネントの構造図:
プログラム運転の結果は以下の通りです.
JavaScript部分のソースコードは以下の通りです.
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 パッケージをダウンロードしてください.