首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

基于ExtJS Grid创造Table例子

2012-09-02 
基于ExtJS Grid创建Table例子基本思路:基于ExtJS4.1版本开发,主要是首先创建一个Data Model组件,mockup一

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

热点排行