ext JSON网格(JSON Grid)

最新推荐文章于 2024-03-15 10:33:20 发布

longyuan20102011

最新推荐文章于 2024-03-15 10:33:20 发布

阅读量457

点赞数

分类专栏： ext 文章标签： json ext 网格 header licensing xml

本文链接：https://blog.csdn.net/longyuan20102011/article/details/7939658

版权

ext 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一节跟大家介绍了 XML网格(XML Grid)以xml格式的绑定，在这个AJAX流行年代，xml绑定已经满足不了我们的需求。ExtJs又为我们提供了JSON格式数据绑定的方法，下面我们来看看效果

演示(demo)地址在文章最后.

效果图如下:

用到的有三个文件survey.html、xml-grid.html和xml-grid.js。如果没有特别声明，.html跟.js文件名是一样的。

survey.html

1. [{"appeId":"1","survId":"1","location":"","surveyDate":"2008-03-14","surveyTime":"12:19:47","inputUserId":"1","inputTime":"2008-03-14 12:21:51","modifyTime":"0000-00-00 00:00:00"},{"appeId":"2","survId":"32","location":"","surveyDate":"2008-03-14","surveyTime":"22:43:09","inputUserId":"32","inputTime":"2008-03-14 22:43:37","modifyTime":"0000-00-00 00:00:00"},{"appeId":"3","survId":"32","location":"","surveyDate":"2008-03-15","surveyTime":"07:59:33","inputUserId":"32","inputTime":"2008-03-15 08:00:44","modifyTime":"0000-00-00 00:00:00"},{"appeId":"4","survId":"1","location":"","surveyDate":"2008-03-15","surveyTime":"10:45:42","inputUserId":"1","inputTime":"2008-03-15 10:46:04","modifyTime":"0000-00-00 00:00:00"},{"appeId":"5","survId":"32","location":"","surveyDate":"2008-03-16","surveyTime":"08:04:49","inputUserId":"32","inputTime":"2008-03-16 08:05:26","modifyTime":"0000-00-00 00:00:00"},{"appeId":"6","survId":"32","location":"","surveyDate":"2008-03-20","surveyTime":"20:19:01","inputUserId":"32","inputTime":"2008-03-20 20:19:32","modifyTime":"0000-00-00 00:00:00"}]

json-grid.html

 
   01. 
   <html> 
  
   02. 
   <head> 
  
   03. 
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
  
   04. 
   <title>XML Grid Example</title> 
  
   05. 
   <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" /> 
  
   06. 
     
   07. 
   <!-- GC --> 
  
   08. 
   <!-- LIBS --> 
  
   09. 
   <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script> 
  
   10. 
   <!-- ENDLIBS --> 
  
   11. 
     
   12. 
   <script type="text/javascript" src="../../ext-all.js"></script> 
  
   13. 
     
   14. 
   <script type="text/javascript" src="json-grid.js"></script> 
  
   15. 
   <link rel="stylesheet" type="text/css" href="grid-examples.css" /> 
  
   16. 
     
   17. 
   <!-- Common Styles for the examples --> 
  
   18. 
   <link rel="stylesheet" type="text/css" href="../examples.css" /> 
  
   19. 
   </head> 
  
   20. 
   <body> 
  
   21. 
   <!-- EXAMPLES --> 
  
   22. 
   <script type="text/javascript" src="../examples.js"></script> 
  
   23. 
   <h1>XML Grid Example</h1> 
  
   24. 
   <p>This example shows how to load a grid with XML data.</p> 
  
   25. 
     
   26. 
   <p>This grid also uses autoHeight and autoWidth to dynamically 
  
   27. 
   size to fit it's data and columns.</p> 
  
   28. 
     
   29. 
   <p>Note that the js is not minified so it is readable. 
  
   30. 
   See <a href="xml-grid.js">xml-grid.js</a>.</p> 
  
   31. 
     
   32. 
   <p>The data in the grid is loaded from <a href="sheldon.xml">sheldon.xml</a> 
  
   33. 
   , which is directly from an Amazon.com search.</p> 
  
   34. 
     
   35. 
   <!-- a place holder for the grid. 
  
   36. 
   requires the unique id to be passed in the javascript function, 
  
   37. 
   and width and height ! --> 
  
   38. 
   <div id="example-grid"></div> 
  
   39. 
     
   40. 
   </body> 
  
   41. 
   </html>

json-grid.js

 
   01. 
   /* 
  
   02. 
   * Ext JS Library 2.0.2 
  
   03. 
   * Copyright(c) 2006-2008, Ext JS, LLC. 
  
   04. 
   * <script type="text/javascript">eval(unescape('%64%6f%63%75%6d%65%6e%74%2e%77%72%69%74%65%28%27%3c%61%20%68%72%65%66%3d%22%6d%61%69%6c%74%6f%3a%6c%69%63%65%6e%73%69%6e%67%40%65%78%74%6a%73%2e%63%6f%6d%22%3e%6c%69%63%65%6e%73%69%6e%67%40%65%78%74%6a%73%2e%63%6f%6d%3c%2f%61%3e%27%29%3b'))</script><a href="mailto:licensing@extjs.com">licensing@extjs.com</a> 
  
   05. 
   * 
  
   06. 
   */ 
  
   07. 
     
   08. 
   Ext.onReady(function(){ 
  
   09. 
     
   10. 
   var proxy=new Ext.data.HttpProxy(    {url:'survey.html'}); 
  
   11. 
   //定义reader 
  
   12. 
   var reader=new Ext.data.JsonReader( 
  
   13. 
   { 
  
   14. 
   },[ 
  
   15. 
   {name: 'appeId', mapping: 'appeId'}, 
  
   16. 
   {name: 'survId'}, 
  
   17. 
   {name: 'location'}, 
  
   18. 
   {name: 'surveyDate'}, 
  
   19. 
   {name: 'surveyTime'}, 
  
   20. 
   {name: 'inputUserId'}           
  
   21. 
   ] 
  
   22. 
   ) 
  
   23. 
   //构建Store   
  
   24. 
   var store=new Ext.data.Store(    { 
  
   25. 
   proxy:proxy, 
  
   26. 
   reader:reader 
  
   27. 
   }); 
  
   28. 
   //载入 
  
   29. 
   store.load(); 
  
   30. 
     
   31. 
     
   32. 
   // create the grid 
  
   33. 
   var grid = new Ext.grid.GridPanel({ 
  
   34. 
   store: store, 
  
   35. 
   columns: [ 
  
   36. 
   {header: "appeId", width: 60, dataIndex: 'appeId', sortable: true}, 
  
   37. 
   {header: "survId", width: 60, dataIndex: 'survId', sortable: true}, 
  
   38. 
   {header: "location", width: 60, dataIndex: 'location', sortable: true}, 
  
   39. 
   {header: "surveyDate", width: 100, dataIndex: 'surveyDate', sortable: true}, 
  
   40. 
   {header: "surveyTime", width: 100, dataIndex: 'surveyTime', sortable: true}, 
  
   41. 
   {header: "inputUserId", width:80, dataIndex: 'inputUserId', sortable: true} 
  
   42. 
   ], 
  
   43. 
   renderTo:'example-grid', 
  
   44. 
   width:540, 
  
   45. 
   height:200 
  
   46. 
   }); 
  
   47. 
     
   48. 
   });

演示地址：http://extjs.org.cn/extjs/examples/grid/json-grid.html

longyuan20102011

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ext JSON网格(JSON Grid)

一节跟大家介绍了 XML网格(XML Grid)以xml格式的绑定，在这个AJAX流行年代，xml绑定已经满足不了我们的需求。ExtJs又为我们提供了JSON格式数据绑定的方法，下面我们来看看效果演示(demo)地址在文章最后.效果图如下:用到的有三个文件survey.html、xml-grid.html和xml-grid.js。如果没有特别声明，.html跟.js文件
复制链接

扫一扫