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 。一切都变的简单。你可以直接,

    • 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

        1.     public String execute() throws Exception
        2.     {
        3.         String action = request.getParameter("action");
        4.         String info = "";
        5.         String callback = request.getParameter("callback");
        6.         String start = request.getParameter("start");
        7.         String limit = request.getParameter("limit");
        8.         StringBuffer text = new StringBuffer();
        9.         List<?> list = 从数据库中去的数据,你可以分页取;
        10.         Integer limit = tv.getStart() + tv.getLimit();
        11.         if (limit > list.size())
        12.         {
        13.             limit = list.size();
        14.         }
        15.         List<?> templates = list.subList(start, limit);
        16.         text.append(callback + "({results:" + list.size()
        17.                 + ",template:[");
        18.         for (Itemplate itemplate : templates)
        19.         {
        20.             text.append("{id:" + itemplate.getId() + ",name:'"
        21.                     + itemplate.getName() + "',user:{id:"
        22.                     + itemplate.getIuser().getId() + ",name:'"
        23.                     + itemplate.getIuser().getUname() + "'}},");
        24.         }
        25.         if (text.charAt(text.length() - 1) == ',')
        26.         {
        27.             text.deleteCharAt(text.length() - 1);
        28.         }
        29.         text.append("]})");
        30.         info=text.toString();
        31.         request.setAttribute("info", info);
        32.         return SUCCESS;
        33.     }
        34.    

           

          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

          评论 1
          添加红包

          请填写红包祝福语或标题

          红包个数最小为10个

          红包金额最低5元

          当前余额3.43前往充值 >
          需支付:10.00
          成就一亿技术人!
          领取后你会自动成为博主和红包主的粉丝 规则
          hope_wisdom
          发出的红包
          实付
          使用余额支付
          点击重新获取
          扫码支付
          钱包余额 0

          抵扣说明:

          1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
          2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

          余额充值