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 } User類

　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> servlet配置

　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 } servlet

?? 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 width: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 width: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 width: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 }); exjst文件

?

---

截圖

1、數據顯示

2、添加和編輯

?

轉載于:https://www.cnblogs.com/blog-cq/p/extjs-user-demo.html

總結

以上是生活随笔為你收集整理的使用ExtJS做一个用户的增删改查的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。