extjs html table,基于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 } }); });HTML部分的源代码如下：

Hello Ext

My Fist Grid Table - ExtJS 4.1

This example shows how to create a grid from Array data.