基于ExtJS Grid创建Table例子
基本思路:
基于ExtJS4.1版本开发,主要是首先创建一个Data Model组件,mockup一些JSON数据
然后将data Model与JSON数据绑定到创建的data store中,最后创建grid组件同时绑定
之前的data store完成整个程序。
一个简单ExtJS组件结构图:
程序运行结果如下:
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开发包。