1. Ext.require(["Ext.grid.*", "Ext.data.*"]); 
  2. Ext.onReady(function() { 
  3.     Ext.QuickTips.init(); 
  4.  
  5.     Ext.define("MyData", { 
  6.         extend : "Ext.data.Model", 
  7.         fields : ["id", { 
  8.             name : "id", 
  9.             mapping : "id" 
  10.         }, { 
  11.             name : "username", 
  12.             mapping : "username" 
  13.         }, { 
  14.             name : "sex", 
  15.             type : "int" 
  16.         }, { 
  17.             name : "createDate", 
  18.             mapping : "createDate", 
  19.             type : "date", 
  20.             dateFormat : 'Y-m-d H:i:s' 
  21.         }, { 
  22.             name : "registDate", 
  23.             type : "date", 
  24.             dateFormat : 'Y-m-d H:i:s', 
  25.             mapping : "registDate" 
  26.         }] 
  27.     }); 
  28.     var pageSize = 10; 
  29.     var store = Ext.create("Ext.data.Store", { 
  30.         model : "MyData", 
  31.         proxy : { 
  32.             type : "ajax", 
  33.             url : "admin_infos.do", 
  34.             reader : { 
  35.                 type : "json", 
  36.                 root : "items" 
  37.             } 
  38.         }, 
  39.         autoLoad : true 
  40.     }); 
  41.     var grid = Ext.create("Ext.grid.Panel", { 
  42.         store : store, 
  43.         selType : 'checkboxmodel', 
  44.         selModel : { 
  45.             mode : 'id', // or SINGLE, SIMPLE ... review API for 
  46.             // Ext.selection.CheckboxModel 
  47.             checkOnly : false 
  48.         // or false to allow checkbox selection on click anywhere in row 
  49.         }, 
  50.         layout : "fit", 
  51.         columns : [{ 
  52.             text : "用户名", 
  53.             width : 200, 
  54.             dataIndex : "username", 
  55.             sortable : true, 
  56.             renderer : function change(val) { 
  57.                 return '<span style="color:red;font-weight:bold;" class="bold" >' 
  58.                         + val + '</span>'; 
  59.             } 
  60.         }, { 
  61.             text : "性别", 
  62.             flex : 1, 
  63.             width : 100, 
  64.             dataIndex : "sex", 
  65.             sortable : false, 
  66.             renderer : function(v) { 
  67.                 if (v == 1) { 
  68.                     return "男"; 
  69.                 } else { 
  70.                     return "女"; 
  71.                 } 
  72.             } 
  73.         }, { 
  74.             text : "创建日期", 
  75.             width : 200, 
  76.             dataIndex : "createDate", 
  77.             sortable : true, 
  78.             renderer : Ext.util.Format.dateRenderer('Y-m-d') 
  79.         }, { 
  80.             text : "注册日期", 
  81.             width : 200, 
  82.             dataIndex : "registDate", 
  83.             sortable : true, 
  84.             renderer : Ext.util.Format.dateRenderer('Y-m-d') 
  85.         }, { 
  86.             text : '操作', 
  87.             xtype : 'actioncolumn', 
  88.             width : 50, 
  89.             items : [{ 
  90.                 icon : 'totosea/p_w_picpaths/delete.gif', // Use a URL in the 
  91.                 // icon config 
  92.                 tooltip : '删除管理员', 
  93.                 iconCls : 'delete', 
  94.                 handler : function(grid, rowIndex, colIndex) { 
  95.                     var rec = store.getAt(rowIndex); 
  96.                     function showResult(btn) { 
  97.                         if (btn == 'yes') { 
  98.                             Ext.Ajax.request({ 
  99.                                 url : 'admin_delete.do', 
  100.                                 params : { 
  101.                                     id : rec.get("id") 
  102.                                 }, 
  103.                                 method : 'POST', 
  104.                                 callback : function(options, success, response) { 
  105.                                     if (success) { 
  106.                                         var responseJson = Ext.JSON 
  107.                                                 .decode(response.responseText); 
  108.                                         Ext.Msg.alert("提示信息", responseJson.msg); 
  109.                                         store.load({ 
  110.                                             params : { 
  111.                                                 start : 0, 
  112.                                                 limit : pageSize 
  113.                                             } 
  114.                                         }); 
  115.                                     } else { 
  116.                                         Ext.Msg.confirm('失败', 
  117.                                                 '请求超时或网络故障,错误编号：[' 
  118.                                                         + response.status 
  119.                                                         + ']是否要重新发送？', 
  120.                                                 function(btn) { 
  121.                                                     if (btn == 'yes') { 
  122.                                                         Ext.Ajax 
  123.                                                                 .request(options); 
  124.                                                     } 
  125.                                                 }); 
  126.                                     } 
  127.                                 } 
  128.                             }); 
  129.                         } 
  130.                     } 
  131.                     Ext.MessageBox.confirm('提示信息', '真的要删除一个管理员么?', showResult); 
  132.                 } 
  133.             }] 
  134.         }], 
  135.         height : 400, 
  136.         width : 800, 
  137.         x : 120, 
  138.         y : 40, 
  139.         title : "用户信息", 
  140.         renderTo : "admindata", 
  141.         trackMouseOver : true, // 鼠标特效 
  142.         autoScroll : true, 
  143.         stateful : true, 
  144.         stateId : 'stateGrid', 
  145.         viewConfig : { 
  146.             columnsText : "显示/隐藏列", 
  147.             sortAscText : "正序排列", 
  148.             sortDescText : "倒序排列", 
  149.             forceFit : true, 
  150.             stripeRows : true 
  151.         }, 
  152.         bbar : new Ext.PagingToolbar({ 
  153.             store : store, // 数据源 
  154.             pageSize : pageSize, 
  155.             displayInfo : true, 
  156.             displayMsg : '当前记录 {0} -- {1} 条 共 {2} 条记录', 
  157.             emptyMsg : "暂无数据显示", 
  158.             prevText : "上一页", 
  159.             nextText : "下一页", 
  160.             refreshText : "刷新", 
  161.             lastText : "最后页", 
  162.             firstText : "第一页", 
  163.             beforePageText : "当前页", 
  164.             afterPageText : "共{0}页" 
  165.         }), 
  166.         tbar : // 工具条 
  167.         [{ 
  168.             text : '刷新', 
  169.             cls : 'refresh', 
  170.             handler : function(btn, pressed) {// 重置查询条件 
  171.                 store.load({ 
  172.                     params : { 
  173.                         start : 0, 
  174.                         limit : pageSize 
  175.                     } 
  176.                 }); 
  177.             } 
  178.         }] 
  179.     }); 
  180. }); 


  1. /** 
  2.  * 删除一个用户 
  3.  */ 
  4. public void delete() { 
  5.     String id = this.servletRequest.getParameter("id"); 
  6.     this.service.removeObject(AdminUser.class, id); 
  7.     JSONObject jsono = new JSONObject(); 
  8.     jsono.put("msg", "删除成功"); 
  9.     JsonResult.json(jsono.toString(), servletResponse); 
  10. } 


  1. <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> 
  2. <% 
  3. String path = request.getContextPath(); 
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 
  5. %> 
  6.   
  7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
  8. <html> 
  9.   <head> 
  10.     <base href="<%=basePath%>"> 
  11.       
  12.     <title>My JSP 'admin.jsp' starting page</title> 
  13.       
  14.     <meta http-equiv="pragma" content="no-cache"> 
  15.     <meta http-equiv="cache-control" content="no-cache"> 
  16.     <meta http-equiv="expires" content="0">    
  17.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
  18.     <meta http-equiv="description" content="This is my page"> 
  19.     <style type="text/css"> 
  20.     .bold:hover{ 
  21.                cursor: pointer; 
  22.     } 
  23.    .x-grid-row-over .x-grid-cell-inner { 
  24.            font-weight: bold; 
  25.        } 
  26.    .delete:hover{ 
  27.    CURSOR: pointer; 
  28.    } 
  29.     </style> 
  30.   </head> 
  31.     <script type="text/javascript" src="ext-4.0/locale/ext-lang-zh_CN.js"></script> 
  32.     <script type="text/javascript" src="totosea/js/admin.js"></script> 
  33.   <body> 
  34.         <div id="admindata"></div> 
  35.     </body> 
  36. </html> 

ext4.0简单表格-Ext.grid.Panel_Ext.grid.Panel

转载自：http://www.cnblogs.com/tatame/archive/2012/04/28/2475391.html