Ext2.0教程二：基本表格GridPanel，从后台数据库取数据

学习使用GridPanel需要先了解Json ，和 Ext.data.Store

json介绍见 http://blog.csdn.net/wayfoon322/archive/2008/07/10/2633428.aspx

Ext.data.Store介绍见：http://blog.csdn.net/wayfoon322/archive/2008/07/11/2638387.aspx

后台需要提供json数据供前台显示。比如下列的json数据

1. stcCallback1001
2. ({results:6,template:
3. [
4. {id:1,name:'流程1',user:{id:1,name:'wayfoon'}},
5. {id:2,name:'流程2',user:{id:1,name:'wayoon'}},
6. {id:3,name:'流程3',user:{id:1,name:'wayfoon'}},
7. {id:4,name:'流程4',user:{id:1,name:'wayfoon'}},
8. {id:5,name:'流程5',user:{id:1,name:'wayfoon'}},
9. {id:6,name:'流程6',user:{id:1,name:'wayfoon'}}
10. ]
11. })

stcCallback1001，由ext提供的参数callback自动生成 ，在后台代码中request.getParameter()得到，从1001开始，1002，1003

results 表示记录总数，results这个名称是自定义的，自己可以设定，比如 total:6

template 真正的数据，名称也是自定义的，以下面Ext.data.Store 中的一致就可以。

{id:1,name:'流程1',user:{id:1,name:'wayfoon'}}, 是一条记录，可以看出 user 是一个对象，如果数据中不包含对象不需要这样写

你也可以访问 'http://extjs.com/forum/topics-remote.php' 查看json数据格式，做个比较。

访问后台数据通常是一个链接，

假如你的后台采用java ，又使用Struts2.0 。一切都变的简单。你可以直接，

1. Stringinfo="{id:'1',name:'wayfoon'}";
2. request.setAttribute("info",info);
3. returnSUCCESS;

info 是String ，值就是json格式的字符串。

假如你采用servlet则可以

1. protectedvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{
2. response.addHeader("Cache-Control","no-cache");
3. response.setContentType("HTML/JavaScript;charset=UTF-8");
4. PrintWriterout=response.getWriter();
5. Stringjson="{id:'1',name:'wayfoon'}";
6. out.print(json)");
7. }
8. }

下面介绍前台Ext部分，可以直接参考

例子： EXT2.0: GridPanel 分页方法绝好例子

下面着重介绍ext和后台的交互，

1. varstore=newExt.data.Store({
2. proxy:newExt.data.ScriptTagProxy({url:'http://extjs.com/forum/topics-remote.php'}),
3. reader:newExt.data.JsonReader({
4. root:'topics',
5. totalProperty:'totalCount',
6. id:'post_id'
7. },[
8. 'post_id','topic_title','author'
9. ])
10. });
11. store.load({params:{start:0,limit:10}});

proxy:是数据代理，数据代理（源）基类由Ext.data.DataProxy定义，在DataProxy的基础，ExtJS提供了Ext.data.MemoryProxy、Ext.data.HttpProxy、Ext.data.ScriptTagProxy等三个分别用于从客户端内存数据、Ajax读取服务器端的数据及从跨域服务器中读取数据等三种实现。

从上面代码中可以看到 代理提交的 url是 'http://extjs.com/forum/topics-remote.php' 。

实际上在后台接收到的，url是 'http://extjs.com/forum/topics-remote.php?callback=1001&start=0&limit=10' 还有一个参数忘了。

后台处理代码：struts2.0

3. publicStringexecute()throwsException
4. {
5. Stringaction=request.getParameter("action");
6. Stringinfo="";
7. Stringcallback=request.getParameter("callback");
8. Stringstart=request.getParameter("start");
9. Stringlimit=request.getParameter("limit");
11. StringBuffertext=newStringBuffer();
12. List<?>list=从数据库中去的数据,你可以分页取;
13. Integerlimit=tv.getStart()+tv.getLimit();
14. if(limit>list.size())
15. {
16. limit=list.size();
17. }
18. List<?>templates=list.subList(start,limit);
19. text.append(callback+"({results:"+list.size()
20. +",template:[");
21. for(Itemplateitemplate:templates)
22. {
23. text.append("{id:"+itemplate.getId()+",name:'"
24. +itemplate.getName()+"',user:{id:"
25. +itemplate.getIuser().getId()+",name:'"
26. +itemplate.getIuser().getUname()+"'}},");
27. }
28. if(text.charAt(text.length()-1)==',')
29. {
30. text.deleteCharAt(text.length()-1);
31. }
32. text.append("]})");
33. info=text.toString();
34. request.setAttribute("info",info);
35. returnSUCCESS;
36. }

info就是需要的json字符串

输出

1. stcCallback1001
2. ({results:6,template:
3. [
4. {id:1,name:'流程1',user:{id:1,name:'wayfoon'}},
5. {id:2,name:'流程2',user:{id:1,name:'wayfoon'}},
6. {id:3,name:'流程3',user:{id:1,name:'wayfoon'}},
7. {id:4,name:'流程4',user:{id:1,name:'wayfoon'}},
8. {id:5,name:'流程5',user:{id:1,name:'wayfoon'}},
9. {id:6,name:'流程6',user:{id:1,name:'wayfoon'}}
10. ]
11. })

效果见 例子： EXT2.0: GridPanel 分页方法绝好例子

写完，一个上午才完成两遍，太慢了。

教程下载地址：http://download.csdn.net/source/594644

---wayfoon 20080827