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

extjs版本为4.2，用户数据放在静态list中存储　　　

　User.java

package com.ext.demo.dao;

public class User {
    private int id;
    private String name;
    private String loginName;
    private String userNo;
    private String desc;
    public User(int id, String name, String loginName, String userNo, String desc) {
        this.id = id;
        this.name = name;
        this.loginName = loginName;
        this.userNo = userNo;
        this.desc = desc;
    }
    public User(String name, String loginName, String userNo, String desc) {
        this.name = name;
        this.loginName = loginName;
        this.userNo = userNo;
        this.desc = desc;
    }
    @Override
    public String toString() {
        return "{"id":"" + id + "", "name":"" + name + "", "loginName":"" + loginName
                + "", "userNo":"" + userNo + "", "desc":"" + desc + ""}";
    }
    public int getId() {
        return id;
    }
    public void setId(int id) {
        this.id = id;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public String getLoginName() {
        return loginName;
    }
    public void setLoginName(String loginName) {
        this.loginName = loginName;
    }
    public String getUserNo() {
        return userNo;
    }
    public void setUserNo(String userNo) {
        this.userNo = userNo;
    }
    public String getDesc() {
        return desc;
    }
    public void setDesc(String desc) {
        this.desc = desc;
    }
}

　web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0" 
    xmlns="http://java.sun.com/xml/ns/javaee" 
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
    http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
  <display-name></display-name>
  <servlet>
    <servlet-name>UserServlet</servlet-name>
    <servlet-class>com.ext.demo.servlet.UserServlet</servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>UserServlet</servlet-name>
    <url-pattern>/user</url-pattern>
  </servlet-mapping>    
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>

　UserServlet.java

package com.ext.demo.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;
import java.util.concurrent.atomic.AtomicInteger;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.ext.demo.dao.User;

public class UserServlet extends HttpServlet {

    private static final long serialVersionUID = 386572909369823760L;

    private final List<User> users = new ArrayList<User>();
    
    private final AtomicInteger ai = new AtomicInteger(1);
    
    /**
     * 初始化数据
     */
    public void init() throws ServletException {
        users.add(new User(ai.getAndIncrement(),"chenqun","cq","00001","管理员"));
        users.add(new User(ai.getAndIncrement(),"chenqwe","cw","00002","业务员"));
        for (int i=0;i<20;i++) {
            users.add(new User(ai.getAndIncrement(), "chendan"+i, "cd"+i, "1000"+i, "临时工"));
        }
    }
    
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/javascript;charset=utf-8");
        response.setCharacterEncoding("utf-8");
        String action = request.getParameter("action");
        PrintWriter out = response.getWriter();
        try{
            if ("createOrUpdate".equals(action)) { 
                String id = request.getParameter("id");
                User user = new User(request.getParameter("name"),
                         request.getParameter("loginName"),
                         request.getParameter("userNo"),
                         request.getParameter("desc"));
                if (id != null && !"".equals(id)) { // 改
                    user.setId(Integer.valueOf(id));
                    updateUser(user);
                } else { // 增
                    addUser(user);
                }
            } else if ("query".equals(action)) { // 查
                String start = request.getParameter("start");
                String limit = request.getParameter("limit");
                String page = request.getParameter("page");
                String query = request.getParameter("query");
                out.write(listToJson(new Integer[]{Integer.parseInt(start), Integer.parseInt(limit), Integer.parseInt(page)},
                     query));
            } else if ("delete".equals(action)) { // 删
                String id = request.getParameter("id");
                deleteUser(Integer.valueOf(id));
            }
        } catch (Exception e) {
            out.write("{"status":0,"msg":" + e.getMessage() + ""}");
        } finally {
            out.flush();
            out.close();
        }
    }

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doGet(request, response);
    }
    
    /**
     * 增
     */
    private void addUser(User user) throws Exception {
        if (user.getLoginName() == null || user.getName() == null) {
            throw new Exception("必填参数不能为空！");
        }
        user.setId(ai.getAndIncrement());
        users.add(user);
    }
    
    /**
     * 查
     */
    private String listToJson(Integer[] paging, String queryString) {
        List<User> user = new ArrayList<User>();
        user.addAll(users);
        if (queryString != null && !"".equals(queryString)) {
            Iterator<User> it = user.iterator();
            while(it.hasNext()){
                User u = (User) it.next();
                if (!u.getName().contains(queryString)) {
                    it.remove();
                }
            }
        }
        
        StringBuffer sb = new StringBuffer();
        int i = ((paging[2] - 1) * paging[1]);
        int len = (i + paging[1]) > user.size() ? user.size() : (i + paging[1]);
        for (; i < len ; i++) {
            sb.append(user.get(i)).append(",");
        }
        String format = String.format("{"total":%d,"data":[%s]}", user.size(), sb.length() == 0 ? "" : sb.substring(0, sb.length() - 1));
        return format;
    }
    
    /**
     * 删
     */
    private void deleteUser(int id) {
        Iterator<User> it = users.iterator();
        while(it.hasNext()){
            User u = (User) it.next();
            if (u.getId() == id) {
                it.remove();
            }
        }
    }
    
    /**
     *  改
     */
    private void updateUser(User user) {
        for (int i = 0, len = users.size(); i < len ; i++) {
            if (users.get(i).getId() == user.getId()) {
                users.set(i, user);
                break;
            }
        }
    }
}

   user.js

Ext.onReady(function(){
    // 列
    var column = [
        {header:'登录名',dataIndex:'loginName'},
        {header:'姓名',dataIndex:'name'},
        {header:'工号',dataIndex:'userNo'},
        {header:'描述',dataIndex:'desc'}
    ];
    // 数据仓库
    var store = new Ext.data.Store({
        pageSize:5,
        proxy:{
            type:'ajax',
            url:'/user?action=query',
            reader:{ // 解析器
                type:'json',
                totalProperty:'total',
                root:'data',
                idProperty:'id'
            }
        },
        fields:[
            {name:'loginName'},
            {name:'name'},
            {name:'userNo'},
            {name:'desc'}
        ]
    });
    // 新增或编辑panel
    var user = new Ext.form.Panel({
        name:'user',
        layout:'form',
        buttonAlign:'center',
        frame:true, // True 为 Panel 填充画面,默认为false.
        url:'/user?action=createOrUpdate',
        defaultType:'textfield',
        items:[{
            allowBlank:false,
            name:'loginName',
            fieldLabel:'登录名',
            blankText:'登录名不能为空',
            100
        },{
            allowBlank:false,
            name:'name',
            fieldLabel:'姓名',
            blankText:'姓名不能为空',
        },{
            name:'userNo',
            fieldLabel:'工号',
        },{
            name:'desc',
            fieldLabel:'描述'
        },{
            name:'id',
            id:'id',
            hidden:true
        }],
        buttons:[{
            text:'确定',
            handler:function(){
                var form = this.up('form').getForm();
                form.submit({
                    params:{id:Ext.getCmp('id').value},
                    success:function(form, action) {
                        Ext.Msg.show({
                            title:'信息',
                            msg:'操作成功',
                            buttons:Ext.Msg.OK,
                            icon:Ext.Msg.INFO
                        });
                        form.reset(); // 充值
                        user_window.hide(); // 隐藏
                        store.reload(); // 重新加载数据
                    }
                })
            }
        },{
            text:'取消',
            handler:function(){
                user_window.hide();
            }
        }]
    })
    // window 
    var user_window = new Ext.Window({
        id:'userWindow',
        title:'添加用户',
        resizable:true, // 可收缩的
        closeAction:'hide', // 关闭操作：隐藏，可以再次show。若为destroy则销毁
        480,
        heigh:330,
        modal:true,
        items:[user]
    });
    // 查询参数
    store.on('beforeload', function(store, option){
        // Ext.apply将配置的所有属性都复制到指定的对象。 需要注意的是，如果递归合并和克隆不需要引用原始对象/数组
        Ext.apply(store.proxy.extraParams, {limit:store.pageSize,query:Ext.getCmp('userName').value})
    })
    // 工具条
    var flag = false;
    var toolbar = new Ext.Toolbar({
        items:[{
            xtype:'textfield',
            fieldLabel:'',
            labelAlign:'right',
            hidden:flag,
            name:'userName',
            id:'userName',
            emptyText:'输入用户名'
        },{
            text:'搜索',
            hidden:flag,
            iconCls:'icon-search',
            handler:function(){
                store.loadPage(1);
            }
        },'->',{ // 向右偏移
            text:'添加',
            iconCls:'icon-add',
            hidden:flag,
            handler:function(){
                user_window.down('form').getForm().reset();
                user_window.show();
            }
        },'-',{ // 分隔符
            text:'编辑',
            iconCls:'icon-edit',
            handler:function(){
                var selected = grid.getSelectionModel();
                if (!selected.hasSelection()) {
                    Ext.Msg.alert('错误','未选择行');
                    return;
                }
                var record = selected.getSelection()[0];
                user_window.setTitle('编辑用户');
                var form = user_window.down('form').getForm();
                form.reset();
                user_window.show();
                form.setValues({
                    'name':record.get('name'),
                    'loginName':record.get('loginName'),
                    'userNo':record.get('userNo'),
                    'desc':record.get('desc'),
                    'id':record.get('id')
                })
            }
        },'-',{
            text:'删除',
            iconCls:'icon-delete',
            handler:function(){
                var selected = grid.getSelectionModel();
                if (!selected.hasSelection()) {
                    Ext.Msg.alert("错误", "未选择行");
                } else {
                    var record = selected.getSelection();
                    Ext.Msg.confirm("确认", "您确定要删除此条记录吗",function(btn){
                        if (btn == 'yes') {
                            Ext.Ajax.request({
                                url:'/user?action=delete&id='+record[0].get('id'),
                                method:'get',
                                success:function(resp) {
                                    Ext.Msg.show({
                                        title:'信息',
                                        msg:'删除成功',
                                        buttons:Ext.Msg.OK,
                                        icon:Ext.Msg.INFO
                                    });
                                    store.reload();
                                }
                            })
                        } 
                    });
                }
            }
        }]
    });
    // 分页条
    var pagebar = new Ext.PagingToolbar({
        pageSize:store.pageSize,
        store:store,
        displayInfo:true,
        displayMsg:'显示第 {0} 条到 {1} 条记录，一共  {2} 条', // 只要当displayInfo为true时才有效，用来显示有数据时的提示信息，{0},{1},{2}会自动被替换成对应的数据
        emptyMsg: "没有记录" // 没有数据时显示信息 
    });
    // 表格
    var grid = new Ext.grid.GridPanel({
        renderTo:'user',
        autoHeight:true,
        store:store,
        950,
        forceFit:true,
        columns:column,
        columnLines:true,
        tbar:toolbar,
        bbar:pagebar
    });
    store.load({params:{start:0,limit:5}});
});

---

截图

1、数据显示

2、添加和编辑