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. • String info="{id:'1',name:'wayfoon'}";
   • request.setAttribute("info", info);
   • 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://extjs.com/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://extjs.com/forum/topics-remote.php' 。

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

 

后台处理代码：struts2.0

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");
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.     }
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 分页方法绝好例子

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

 Ext2.0教程三：Ext2.0从新建窗口开始，见下一遍文章

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

---wayfoon 20080827