基于ExtJS Grid创建Table例子
2012-08-09 10:49
260 查看
基本思路:
基于ExtJS4.1版本开发,主要是首先创建一个Data Model组件,mockup一些JSON数据
然后将data Model与JSON数据绑定到创建的data store中,最后创建grid组件同时绑定
之前的data store完成整个程序。
一个简单ExtJS组件结构图:
程序运行结果如下:
JavaScript部分的源代码如下:
基于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开发包。
相关文章推荐
- 基于ExtJS Grid创建Table例子
- 基于ExtJS Grid创建Table例子
- extjs中如何创建一个带分页功能的Ext.grid.GridPanel
- Silverlight中使用Grid创建自定义的Table表格
- ExtJS grid tableGrid study
- extjs创建grid
- ExtJs grid(二)注意事项及例子
- MySQL如何创建主键?Alter table add PRIMARY KEY的用法和例子
- wcf创建基于tcp协议的iis寄宿服务的第一个例子
- Extjs动态生成gridPannel(动态的列,动态的table)
- ExtJS创建Grid
- 第六章 创建一个基于Table的简单App(一)
- 一个完整的extjs的GridPanel例子
- 第五章 :创建一个简单的基于Table View的应用程序
- extjs中创建自适应大小grid
- Silverlight中使用Grid创建自定义的Table表格
- 第六章 创建一个基于Table的简单App(二)
- Extjs3.2 grid简单例子1
- MySQL如何创建主键?Alter table add PRIMARY KEY的用法和例子
- Extjs创建form表单以及绑定动态数据到grid