读书人

基于ExtJS Grid创造Table例子

发布时间: 2012-09-02 21:00:34 作者: rapoo

基于ExtJS Grid创建Table例子

基本思路:

基于ExtJS4.1版本开发,主要是首先创建一个Data Model组件,mockup一些JSON数据

然后将data Model与JSON数据绑定到创建的data store中,最后创建grid组件同时绑定

之前的data store完成整个程序。


一个简单ExtJS组件结构图:

基于ExtJS Grid创造Table例子

程序运行结果如下:

基于ExtJS Grid创造Table例子

JavaScript部分的源代码如下:

<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开发包。

读书人网 >JavaScript

热点推荐