extjs版本为4.2，用户数据放在静态list中存储
User.java
1 package com.ext.demo.dao; 2 3 public class User { 4 private int id; 5 private String name; 6 private String loginName; 7 private String userNo; 8 private String desc; 9 public User(int id, String name, String loginName, String userNo, String desc) { 10 this.id = id; 11 this.name = name; 12 this.loginName = loginName; 13 this.userNo = userNo; 14 this.desc = desc; 15 } 16 public User(String name, String loginName, String userNo, String desc) { 17 this.name = name; 18 this.loginName = loginName; 19 this.userNo = userNo; 20 this.desc = desc; 21 } 22 @Override 23 public String toString() { 24 return "{"id":"" + id + "", "name":"" + name + "", "loginName":"" + loginName 25 + "", "userNo":"" + userNo + "", "desc":"" + desc + ""}"; 26 } 27 public int getId() { 28 return id; 29 } 30 public void setId(int id) { 31 this.id = id; 32 } 33 public String getName() { 34 return name; 35 } 36 public void setName(String name) { 37 this.name = name; 38 } 39 public String getLoginName() { 40 return loginName; 41 } 42 public void setLoginName(String loginName) { 43 this.loginName = loginName; 44 } 45 public String getUserNo() { 46 return userNo; 47 } 48 public void setUserNo(String userNo) { 49 this.userNo = userNo; 50 } 51 public String getDesc() { 52 return desc; 53 } 54 public void setDesc(String desc) { 55 this.desc = desc; 56 } 57 }
web.xml
1 <?xml version="1.0" encoding="UTF-8"?> 2 <web-app version="3.0" 3 xmlns="http://java.sun.com/xml/ns/javaee" 4 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 5 xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 6 http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"> 7 <display-name></display-name> 8 <servlet> 9 <servlet-name>UserServlet</servlet-name> 10 <servlet-class>com.ext.demo.servlet.UserServlet</servlet-class> 11 </servlet> 12 13 <servlet-mapping> 14 <servlet-name>UserServlet</servlet-name> 15 <url-pattern>/user</url-pattern> 16 </servlet-mapping> 17 <welcome-file-list> 18 <welcome-file>index.jsp</welcome-file> 19 </welcome-file-list> 20 </web-app>
UserServlet.java
1 package com.ext.demo.servlet; 2 3 import java.io.IOException; 4 import java.io.PrintWriter; 5 import java.util.ArrayList; 6 import java.util.Iterator; 7 import java.util.List; 8 import java.util.concurrent.atomic.AtomicInteger; 9 10 import javax.servlet.ServletException; 11 import javax.servlet.http.HttpServlet; 12 import javax.servlet.http.HttpServletRequest; 13 import javax.servlet.http.HttpServletResponse; 14 15 import com.ext.demo.dao.User; 16 17 public class UserServlet extends HttpServlet { 18 19 private static final long serialVersionUID = 386572909369823760L; 20 21 private final List<User> users = new ArrayList<User>(); 22 23 private final AtomicInteger ai = new AtomicInteger(1); 24 25 /** 26 * 初始化数据 27 */ 28 public void init() throws ServletException { 29 users.add(new User(ai.getAndIncrement(),"chenqun","cq","00001","管理员")); 30 users.add(new User(ai.getAndIncrement(),"chenqwe","cw","00002","业务员")); 31 for (int i=0;i<20;i++) { 32 users.add(new User(ai.getAndIncrement(), "chendan"+i, "cd"+i, "1000"+i, "临时工")); 33 } 34 } 35 36 public void doGet(HttpServletRequest request, HttpServletResponse response) 37 throws ServletException, IOException { 38 response.setContentType("text/javascript;charset=utf-8"); 39 response.setCharacterEncoding("utf-8"); 40 String action = request.getParameter("action"); 41 PrintWriter out = response.getWriter(); 42 try{ 43 if ("createOrUpdate".equals(action)) { 44 String id = request.getParameter("id"); 45 User user = new User(request.getParameter("name"), 46 request.getParameter("loginName"), 47 request.getParameter("userNo"), 48 request.getParameter("desc")); 49 if (id != null && !"".equals(id)) { // 改 50 user.setId(Integer.valueOf(id)); 51 updateUser(user); 52 } else { // 增 53 addUser(user); 54 } 55 } else if ("query".equals(action)) { // 查 56 String start = request.getParameter("start"); 57 String limit = request.getParameter("limit"); 58 String page = request.getParameter("page"); 59 String query = request.getParameter("query"); 60 out.write(listToJson(new Integer[]{Integer.parseInt(start), Integer.parseInt(limit), Integer.parseInt(page)}, 61 query)); 62 } else if ("delete".equals(action)) { // 删 63 String id = request.getParameter("id"); 64 deleteUser(Integer.valueOf(id)); 65 } 66 } catch (Exception e) { 67 out.write("{"status":0,"msg":" + e.getMessage() + ""}"); 68 } finally { 69 out.flush(); 70 out.close(); 71 } 72 } 73 74 public void doPost(HttpServletRequest request, HttpServletResponse response) 75 throws ServletException, IOException { 76 doGet(request, response); 77 } 78 79 /** 80 * 增 81 */ 82 private void addUser(User user) throws Exception { 83 if (user.getLoginName() == null || user.getName() == null) { 84 throw new Exception("必填参数不能为空！"); 85 } 86 user.setId(ai.getAndIncrement()); 87 users.add(user); 88 } 89 90 /** 91 * 查 92 */ 93 private String listToJson(Integer[] paging, String queryString) { 94 List<User> user = new ArrayList<User>(); 95 user.addAll(users); 96 if (queryString != null && !"".equals(queryString)) { 97 Iterator<User> it = user.iterator(); 98 while(it.hasNext()){ 99 User u = (User) it.next(); 100 if (!u.getName().contains(queryString)) { 101 it.remove(); 102 } 103 } 104 } 105 106 StringBuffer sb = new StringBuffer(); 107 int i = ((paging[2] - 1) * paging[1]); 108 int len = (i + paging[1]) > user.size() ? user.size() : (i + paging[1]); 109 for (; i < len ; i++) { 110 sb.append(user.get(i)).append(","); 111 } 112 String format = String.format("{"total":%d,"data":[%s]}", user.size(), sb.length() == 0 ? "" : sb.substring(0, sb.length() - 1)); 113 return format; 114 } 115 116 /** 117 * 删 118 */ 119 private void deleteUser(int id) { 120 Iterator<User> it = users.iterator(); 121 while(it.hasNext()){ 122 User u = (User) it.next(); 123 if (u.getId() == id) { 124 it.remove(); 125 } 126 } 127 } 128 129 /** 130 * 改 131 */ 132 private void updateUser(User user) { 133 for (int i = 0, len = users.size(); i < len ; i++) { 134 if (users.get(i).getId() == user.getId()) { 135 users.set(i, user); 136 break; 137 } 138 } 139 } 140 }
user.js
1 Ext.onReady(function(){ 2 // 列 3 var column = [ 4 {header:'登录名',dataIndex:'loginName'}, 5 {header:'姓名',dataIndex:'name'}, 6 {header:'工号',dataIndex:'userNo'}, 7 {header:'描述',dataIndex:'desc'} 8 ]; 9 // 数据仓库 10 var store = new Ext.data.Store({ 11 pageSize:5, 12 proxy:{ 13 type:'ajax', 14 url:'/user?action=query', 15 reader:{ // 解析器 16 type:'json', 17 totalProperty:'total', 18 root:'data', 19 idProperty:'id' 20 } 21 }, 22 fields:[ 23 {name:'loginName'}, 24 {name:'name'}, 25 {name:'userNo'}, 26 {name:'desc'} 27 ] 28 }); 29 // 新增或编辑panel 30 var user = new Ext.form.Panel({ 31 name:'user', 32 layout:'form', 33 buttonAlign:'center', 34 frame:true, // True 为 Panel 填充画面,默认为false. 35 url:'/user?action=createOrUpdate', 36 defaultType:'textfield', 37 items:[{ 38 allowBlank:false, 39 name:'loginName', 40 fieldLabel:'登录名', 41 blankText:'登录名不能为空', 42 100 43 },{ 44 allowBlank:false, 45 name:'name', 46 fieldLabel:'姓名', 47 blankText:'姓名不能为空', 48 },{ 49 name:'userNo', 50 fieldLabel:'工号', 51 },{ 52 name:'desc', 53 fieldLabel:'描述' 54 },{ 55 name:'id', 56 id:'id', 57 hidden:true 58 }], 59 buttons:[{ 60 text:'确定', 61 handler:function(){ 62 var form = this.up('form').getForm(); 63 form.submit({ 64 params:{id:Ext.getCmp('id').value}, 65 success:function(form, action) { 66 Ext.Msg.show({ 67 title:'信息', 68 msg:'操作成功', 69 buttons:Ext.Msg.OK, 70 icon:Ext.Msg.INFO 71 }); 72 form.reset(); // 充值 73 user_window.hide(); // 隐藏 74 store.reload(); // 重新加载数据 75 } 76 }) 77 } 78 },{ 79 text:'取消', 80 handler:function(){ 81 user_window.hide(); 82 } 83 }] 84 }) 85 // window 86 var user_window = new Ext.Window({ 87 id:'userWindow', 88 title:'添加用户', 89 resizable:true, // 可收缩的 90 closeAction:'hide', // 关闭操作：隐藏，可以再次show。若为destroy则销毁 91 480, 92 heigh:330, 93 modal:true, 94 items:[user] 95 }); 96 // 查询参数 97 store.on('beforeload', function(store, option){ 98 // Ext.apply将配置的所有属性都复制到指定的对象。 需要注意的是，如果递归合并和克隆不需要引用原始对象/数组 99 Ext.apply(store.proxy.extraParams, {limit:store.pageSize,query:Ext.getCmp('userName').value}) 100 }) 101 // 工具条 102 var flag = false; 103 var toolbar = new Ext.Toolbar({ 104 items:[{ 105 xtype:'textfield', 106 fieldLabel:'', 107 labelAlign:'right', 108 hidden:flag, 109 name:'userName', 110 id:'userName', 111 emptyText:'输入用户名' 112 },{ 113 text:'搜索', 114 hidden:flag, 115 iconCls:'icon-search', 116 handler:function(){ 117 store.loadPage(1); 118 } 119 },'->',{ // 向右偏移 120 text:'添加', 121 iconCls:'icon-add', 122 hidden:flag, 123 handler:function(){ 124 user_window.down('form').getForm().reset(); 125 user_window.show(); 126 } 127 },'-',{ // 分隔符 128 text:'编辑', 129 iconCls:'icon-edit', 130 handler:function(){ 131 var selected = grid.getSelectionModel(); 132 if (!selected.hasSelection()) { 133 Ext.Msg.alert('错误','未选择行'); 134 return; 135 } 136 var record = selected.getSelection()[0]; 137 user_window.setTitle('编辑用户'); 138 var form = user_window.down('form').getForm(); 139 form.reset(); 140 user_window.show(); 141 form.setValues({ 142 'name':record.get('name'), 143 'loginName':record.get('loginName'), 144 'userNo':record.get('userNo'), 145 'desc':record.get('desc'), 146 'id':record.get('id') 147 }) 148 } 149 },'-',{ 150 text:'删除', 151 iconCls:'icon-delete', 152 handler:function(){ 153 var selected = grid.getSelectionModel(); 154 if (!selected.hasSelection()) { 155 Ext.Msg.alert("错误", "未选择行"); 156 } else { 157 var record = selected.getSelection(); 158 Ext.Msg.confirm("确认", "您确定要删除此条记录吗",function(btn){ 159 if (btn == 'yes') { 160 Ext.Ajax.request({ 161 url:'/user?action=delete&id='+record[0].get('id'), 162 method:'get', 163 success:function(resp) { 164 Ext.Msg.show({ 165 title:'信息', 166 msg:'删除成功', 167 buttons:Ext.Msg.OK, 168 icon:Ext.Msg.INFO 169 }); 170 store.reload(); 171 } 172 }) 173 } 174 }); 175 } 176 } 177 }] 178 }); 179 // 分页条 180 var pagebar = new Ext.PagingToolbar({ 181 pageSize:store.pageSize, 182 store:store, 183 displayInfo:true, 184 displayMsg:'显示第 {0} 条到 {1} 条记录，一共 {2} 条', // 只要当displayInfo为true时才有效，用来显示有数据时的提示信息，{0},{1},{2}会自动被替换成对应的数据 185 emptyMsg: "没有记录" // 没有数据时显示信息 186 }); 187 // 表格 188 var grid = new Ext.grid.GridPanel({ 189 renderTo:'user', 190 autoHeight:true, 191 store:store, 192 950, 193 forceFit:true, 194 columns:column, 195 columnLines:true, 196 tbar:toolbar, 197 bbar:pagebar 198 }); 199 store.load({params:{start:0,limit:5}}); 200 });
截图
1、数据显示
2、添加和编辑
