使用ExtJS做一个用户的增删改查

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