ext JSON网格(JSON Grid)

来源：互联网发布：网络安全法四大焦点编辑：程序博客网时间：2024/04/28 10:36

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

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

效果图如下:

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

survey.html

view source
print?
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

view source
print?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>XML Grid Example</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
 
<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->
 
<script type="text/javascript" src="../../ext-all.js"></script>
 
<script type="text/javascript" src="json-grid.js"></script>
<link rel="stylesheet" type="text/css" href="grid-examples.css" />
 
<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../examples.css" />
</head>
<body>
<!-- EXAMPLES -->
<script type="text/javascript" src="../examples.js"></script>
<h1>XML Grid Example</h1>
<p>This example shows how to load a grid with XML data.</p>
 
<p>This grid also uses autoHeight and autoWidth to dynamically
size to fit it's data and columns.</p>
 
<p>Note that the js is not minified so it is readable.
See <a href="xml-grid.js">xml-grid.js</a>.</p>
 
<p>The data in the grid is loaded from <a href="sheldon.xml">sheldon.xml</a>
, which is directly from an Amazon.com search.</p>
 
<!-- a place holder for the grid.
requires the unique id to be passed in the javascript function,
and width and height ! -->
<div id="example-grid"></div>
 
</body>
</html>

json-grid.js

view source
print?
/*
* Ext JS Library 2.0.2
* Copyright(c) 2006-2008, Ext JS, LLC.
* <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>
*
*/
 
Ext.onReady(function(){
 
var proxy=new Ext.data.HttpProxy(    {url:'survey.html'});
//定义reader
var reader=new Ext.data.JsonReader(
{
},[
{name: 'appeId', mapping: 'appeId'},
{name: 'survId'},
{name: 'location'},
{name: 'surveyDate'},
{name: 'surveyTime'},
{name: 'inputUserId'}          
]
)
//构建Store  
var store=new Ext.data.Store(    {
proxy:proxy,
reader:reader
});
//载入
store.load();
 
 
// create the grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{header: "appeId", width: 60, dataIndex: 'appeId', sortable: true},
{header: "survId", width: 60, dataIndex: 'survId', sortable: true},
{header: "location", width: 60, dataIndex: 'location', sortable: true},
{header: "surveyDate", width: 100, dataIndex: 'surveyDate', sortable: true},
{header: "surveyTime", width: 100, dataIndex: 'surveyTime', sortable: true},
{header: "inputUserId", width:80, dataIndex: 'inputUserId', sortable: true}
],
renderTo:'example-grid',
width:540,
height:200
});
 
});

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