您的位置：首页 > Web前端 > JavaScript

基于ExtJS Grid创建Table例子

2016-07-29 00:00 267 查看

基本思路：

基于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部分的源代码如下：

<html>
<head>
<title>Hello Ext</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/ext-all.js"></script>
<!-- <script type="text/javascript" src="app.js"></script> -->
<script type="text/javascript" src="app/grid-demo.js"></script>
<style type="text/css">
body {
margin-top: 30px;
margin-right: 30px;
margin-bottom: 30px;
margin-left: 30px;
}
</style>
</head>
<body>
<h1>My Fist Grid Table - ExtJS 4.1</h1>
<p>This example shows how to create a grid from Array data.</p><br>
<div id="grid-example"></div>
</body>
</html>

在google chrome上测试通过。运行本程序前请下载ExtJS 4.1开发包。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航