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

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

2009-05-20 10:38 892人阅读 评论(0) 收藏 举报

学习使用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:///forum/topics-remote.php'' 查看json数据格式，做个比较。

 

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

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

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

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

 

假如你采用servlet则可以

1. protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  
2.     response.addHeader("Cache-Control", "no-cache");     
3.     response.setContentType("HTML/JavaScript;charset=UTF-8");   
4.     PrintWriter out = response.getWriter();    
5.     String json = " {id:''1'',name:''wayfoon''}  ";   
6.     out.print(json)");  
7.    }         
8. }   

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

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

 

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

1. var store = new Ext.data.Store({    
2.                 proxy : new Ext.data.ScriptTagProxy({url:''http:///forum/topics-remote.php''}),    
3.                 reader: new Ext.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:///forum/topics-remote.php'' 。

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

 

后台处理代码：struts2.0

1. 
   
2. 
   
3.     public String execute() throws Exception
4.     {
5.         String action = request.getParameter("action");
6.         String info = "";
7.         String callback = request.getParameter("callback");
8.         String start = request.getParameter("start");
9.         String limit = request.getParameter("limit");
10. 
    
11.         StringBuffer text = new StringBuffer();
12.         List<?> list = 从数据库中去的数据,你可以分页取;
13.         Integer limit = 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 (Itemplate itemplate : 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.         return SUCCESS;
36.     }
37. 
    
38.    

 

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 分页方法绝好例子