Grid读取json数据

Grid读取json数据

一、不传URL

{"UserName":"admin","Name":"李亚斌","Gender":"M","Password":"123456","Status":"0","Department":"技术部","Title":"程序员","Email":"bingren12345@hotmail.com","OfficePhone":"5123456","Mobile":"13805602615","Comments":"","CreateUser":"1","CreateTime":"2009-10-190:00:00","ModifyUser":"1","ModifyTime":"2009-10-3010:04:22"}, {"UserName":"00001","Name":"李香兰","Gender":"F","Password":"123456","Status":"0","Department":"技术部","Title":"程序员","Email":"lixianglan@yahoo.com","OfficePhone":"5123456","Mobile":"13812345678","Comments":"","CreateUser":"1","CreateTime":"2009-10-310:00:00","ModifyUser":"","ModifyTime":""} ] } vards=newExt.data.Store({ //proxy:newExt.data.MemoryProxy(myData), reader:newExt.data.JsonReader({root:'Head'}, [{name:'UserName'},{name:'Name'},{name:'Gender'},{name:'Password'},{name:'Status'},{name:'Department'},{name:'Title'},{name:'Email'},{name:'OfficePhone'}]) }); ds.loadData(myData) 或者 vards=newExt.data.Store({ proxy:newExt.data.MemoryProxy(myData), reader:newExt.data.JsonReader({root:'Head'}, [{name:'UserName'},{name:'Name'},{name:'Gender'},{name:'Password'},{name:'Status'},{name:'Department'},{name:'Title'},{name:'Email'},{name:'OfficePhone'}]) }); ds.load()都可以

二、使用URL

(1)JSON HTMLPage.htm页面做数据源

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

相应的ext代码

Ext.onReady(function(){ varproxy=newExt.data.HttpProxy({url:'HTMLPage.htm'}); varreader=newExt.data.JsonReader({root:'Head'}, [ {name:'appeId',mapping:'appeId'}, {name:'survId'}, {name:'location'}, {name:'surveyDate'}, {name:'surveyTime'}, {name:'inputUserId'} ] ) varstore=newExt.data.Store({ proxy:proxy, reader:reader }); store.load(); vargrid=newExt.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 });

(2).如果json 数据中 没有数据标题"Head“只需要把reader改成 如下即可：其他不需要改变

varreader=newExt.data.JsonReader({}, [ {name:'appeId',mapping:'appeId'}, {name:'survId'}, {name:'location'}, {name:'surveyDate'}, {name:'surveyTime'}, {name:'inputUserId'} ] )

经验小技巧：传data 的URL文件可为，html,aspx.js等，文件引用的js永远和 文件在同一路径。

另外主要注意一下 HttpProxy 和MemoryProxy的区别，细心的读者可以看到 以上两种方法 使用的proxy使用的不同

MemoryProxy

MemoryProxy只能从JavaScript对象获得数据，可以直接把数组，或JSON和XML格式的数据交给它处理，如下面的代码所示。
var proxy = new Ext.data.MemoryProxy([
['id1','name1','descn1'],
['id2','name2','descn2']
]);
HttpProxy
HttpProxy使用HTTP协议，通过Ajax去后台取数据，构造它时需要设置url:'xxx.jsp'参数。这里的url可以替换成任何一个合法的网址，这样HttpProxy才知道去哪里获取数据，如下面的代码所示。
var proxy = new Ext.data.HttpProxy({url:'xxx.jsp'});
后台需要返回EXT所需要的JSON格式的数据，下面的内容就是后台使用JSP的一个范例，如下面的代码所示。
response.setContentType("application/x-json");
Writer out = response.getWriter();
out.print("[" +
"['id1','name1','descn1']" +
"['id2','name2','descn2']" +
"]");
请注意，这里的HttpProxy不支持跨域，它只能从同一域中获得数据。如果想跨域，请参考下面的ScriptTagProxy。

ScriptTagProxy
ScriptTagProxy的用法几乎和HttpProxy一样，如下面的代码所示。
var proxy = new Ext.data.ScriptTagProxy({url:'xxx.jsp'});
从这里也看不出来它是如何支持跨域的，我们还需要在后台进行相应的处理，如下面的代码所示
String cb = request.getParameter("callback");
response.setContentType("text/javascript");
Writer out = response.getWriter();
out.write(cb + "(");
out.print("[" +
"['id1','name1','descn1']" +
"['id2','name2','descn2']" +
"]");
out.write(");");
其 中的关键就在于从请求中获得的callback参数，这个参数叫做回调函数。ScriptTag- Proxy会在当前的HTML页面里添加一个<script type="text/javascript"src="/xxx.jsp"> </script>标签，然后把后台返回的内容添加到这个标签中，这样就可以解决跨域访问数据的问题。为了让后台返回的内容可以在动态生成的 标签中运行，EXT会生成一个名为callback的回调函数，并把回调函数的名称传递给后台，由后台生成callback(data)形式的响应内容， 然后返回给前台自动运行。