Ext Grid Form 增删改例子

框架是 Extjs+Structs2+Spring+Hibernate 直接调用action获取数据和保存

页面JS代码如下

 

JsonReader和Dataproxy定义

2张表 一张Userinfo 一张Departmentinfo  Departmentinfo 用来填充表单的ComboBox

    var Userreader = new Ext.data.JsonReader({
        totalProperty: "totalSize",
        root: "data"
    },
    Ext.data.Record.create([{
        name: "UserID",
        type: "string"
    },
    {
        name: "UserName",
        type: "string"
    },
    {
        name: "UserPassword",
        type: "string"
    },
    {
        name: "RoleList",
        type: "string"
    },
    {
        name: "FuncList",
        type: "string"
    },
    {
        name: "Sex",
        type: "string"
    },
    {
        name: "WenHua",
        type: "string"
    },
    {
        name: "Age",
        type: "int"
    },
    {
        name: "Email",
        type: "string"
    },
    {
        name: "Telephone",
        type: "string"
    },
    {
        name: "Cellphone",
        type: "string"
    },
    {
        name: "ShortName",
        type: "string"
    },
    {
        name: "DepID",
        type: "int"
    }]));

    var Deptreader = new Ext.data.JsonReader({
        totalProperty: "totalSize",
        root: "data"
    },
    Ext.data.Record.create([{
        name: "DepID",
        type: "int"
    },
    {
        name: "DepCode",
        type: "string"
    },
    {
        name: "DepName",
        type: "string"
    },
    {
        name: "Comment",
        type: "string"
    }]));

    var Usercolumns = [{
        "header": "UserID",
        "dataIndex": "UserID",
        "sortable": "true",
        "id": "UserID"
    },
    {
        "header": "UserName",
        "dataIndex": "UserName",
        "sortable": "true",
        "id": "UserName"
    },
    {
        "header": "UserPassword",
        "dataIndex": "UserPassword",
        "sortable": "true",
        "id": "UserPassword"
    },
    {
        "header": "RoleList",
        "dataIndex": "RoleList",
        "sortable": "true",
        "id": "RoleList"
    },
    {
        "header": "FuncList",
        "dataIndex": "FuncList",
        "sortable": "true",
        "id": "FuncList"
    }];
    var Userproxy = new Ext.data.HttpProxy({
        url: 'GetUserList.action'
    });

    var Userstore = new Ext.data.Store({
        proxy: Userproxy,
        reader: Userreader
    });

    var Deptproxy = new Ext.data.HttpProxy({
        url: 'GetDeptList.action'
    });

    var Deptstore = new Ext.data.Store({
        proxy: Deptproxy,
        reader: Deptreader
    });

 

GridPanel

    var UserMgrPn = new Ext.grid.GridPanel({
        title: '用户管理',
        closable: true,
        store: Userstore,
        columns: Usercolumns,
        tbar: [{
            pressed: true,
            text: 'Add',
            handler: doAddUser
        },

        //加上这句，后面的就显示到右边去了
        {
            pressed: true,
            text: "Edit",
            handler: doEditUser
        },
        {
            pressed: true,
            text: "Delete",
            handler: doDelUser
        }]
    });

 

增删改事件，试验代码，比较臃肿，囧，可以简化很多的

 

    var doAddUser = function() {
        var simpleForm = new Ext.FormPanel({
            labelWidth: 75,
            // label settings here cascade unless overridden
            frame: true,
            title: 'User Info',
            bodyStyle: 'padding:5px 5px 0',
            width: 350,
            defaults: {
                width: 230
            },
            defaultType: 'textfield',
            items: [{
                fieldLabel: 'UserID',
                name: 'UserID'
            },
            {
                fieldLabel: 'UserName',

                name: 'UserName'
            },
            {
                fieldLabel: 'UserPassword',
                name: 'UserPassword'
            },
            {
                fieldLabel: 'RoleList',
                name: 'RoleList'
            },
            {
                fieldLabel: 'FuncList',
                name: 'FuncList'
            },
            {
                fieldLabel: 'Sex',
                name: 'Sex'
            },
            new Ext.form.ComboBox({
                fieldLabel: 'Department',
                hiddenName: 'DepID',
                store: Deptstore,
                valueField: 'DepID',
                displayField: 'DepName',
                typeAhead: true,
                mode: 'local',
                triggerAction: 'all',
                emptyText: 'Select a department',
                selectOnFocus: true
            })],
            buttons: [{
                text: 'Save',
                handler: function() {
                    if (simpleForm.form.isValid()) {
                        simpleForm.form.doAction('submit', {
                            url: 'EditUserSave.action?action=add',
                            method: 'post',
                            params: '',
                            success: function(form, action) {
                                Ext.Msg.alert('success', action.result.info);

                                Userstore.load();
                                newFormWin.hide();
                            },
                            failure: function() {
                                Ext.Msg.alert('fail', 'notice');

                            }
                        });
                    }
                }
            },
            {
                text: 'Cancel'
            }]
        });
        var myFormWin = function() {
            // create the window on the first click and reuse on subsequent
            // clicks

            newFormWin = new Ext.Window({
                layout: 'fit',
                width: 400,
                height: 300,
                plain: true,
                title: '',
                items: simpleForm
            });
            newFormWin.show('New1');
        };
        myFormWin();
        Deptstore.load();
    };

    var doEditUser = function() {
        var simpleForm = new Ext.FormPanel({
            labelWidth: 75,
            // label settings here cascade unless overridden
            frame: true,
            title: 'User Info',
            bodyStyle: 'padding:5px 5px 0',
            width: 350,
            reader: Userreader,
            defaults: {
                width: 230
            },
            defaultType: 'textfield',
            items: [{
                fieldLabel: 'UserID',
                name: 'UserID'
            },
            {
                fieldLabel: 'UserName',

                name: 'UserName'
            },
            {
                fieldLabel: 'UserPassword',

                name: 'UserPassword'
            },
            {
                fieldLabel: 'RoleList',
                name: 'RoleList'
            },
            {
                fieldLabel: 'FuncList',
                name: 'FuncList'
            },
            {
                fieldLabel: 'Sex',
                name: 'Sex'
            },
            new Ext.form.ComboBox({
                fieldLabel: 'Department',
                hiddenName: 'DepID',
                store: Deptstore,
                valueField: 'DepID',
                displayField: 'DepName',
                typeAhead: true,
                mode: 'local',
                triggerAction: 'all',
                emptyText: 'Select a department',
                selectOnFocus: true
            })],
            buttons: [{
                text: 'Save',
                handler: function() {
                    if (simpleForm.form.isValid()) {

                        simpleForm.form.doAction('submit', {
                            url: 'EditUserSave.action?action=edit',
                            method: 'post',
                            params: '',
                            success: function(form, action) {
                                Ext.Msg.alert('success', action.result.info);

                                Userstore.load();
                                newFormWin.hide();
                            },
                            failure: function() {
                                Ext.Msg.alert('fail', 'notice');

                            }
                        });
                    }
                }
            },
            {
                text: 'Cancel'
            }]
        });
        var myFormWin = function() {
            // create the window on the first click and reuse on subsequent
            // clicks

            newFormWin = new Ext.Window({
                layout: 'fit',
                width: 400,
                height: 300,
                plain: true,
                title: '',
                items: simpleForm
            });
            newFormWin.show('New1');
        };

        var _record = UserMgrPn.getSelectionModel().getSelected();
        if (!_record) {
            Ext.Msg.alert('修改操作', '请选择要修改的一项！');
        } else {
            myFormWin();
            Deptstore.load();
            simpleForm.form.load({
                url: 'EditUserLoad.action?UserID=' + _record.get('UserID'),
                waitMsg: '正在载入数据',
                failure: function(form, action) {
                    Ext.Msg.alert('编辑', '载入失败');
                }
            });
        }
    };

    var doDelUser = function() {
        var _record = UserMgrPn.getSelectionModel().getSelected();
        if (!_record) {
            Ext.Msg.alert('删除操作', '请选择要删除的一项！');
        } else {
            Ext.Msg.confirm('确认', '真的要删除吗？',
            function(btn) {
                if (btn == 'yes') {
                    Ext.Ajax.request({
                        url: 'EditUserSave.action?action=del&UserID=' + _record.get('UserID'),
                        success: function(result) {　　　Ext.Msg.alert('Result', '删除成功！');
                            Userstore.load();
                        }
                    });
                }
            });
        }
    };

 

后台Java代码如下

UserService

 

public class UserService extends BaseAction {

    /**
     * 
     */
    private static final long serialVersionUID = 1L;

    private String UserID;
    private String UserName;
    private String UserPassword;
    private String RoleList;
    private String FuncList;
    private Integer sex;
    private String wenHua;
    private Integer age;
    private String shortName;
    private String email;
    private String telphone;
    private String cellphone;
    private Integer DepID;
    private UserinfoDAO userdao;

    @SuppressWarnings("unchecked")
    public String GetUserList() throws IOException {
        Iterator ir = userdao.findAll().iterator();
        List list = new ArrayList();

        while (ir.hasNext()) {
            Userinfo user = (Userinfo) ir.next();
            Map<String, Object> row = new HashMap<String, Object>();
            row.put("UserID", user.getUserId());
            row.put("UserName", user.getUserName());
            row.put("UserPassword", user.getUserPassword());
            row.put("RoleList", user.getRoleList());
            row.put("FuncList", user.getFuncList());
            row.put("Sex", user.getSex());
            row.put("WenHua", user.getWenHua());
            row.put("Age", user.getAge());
            row.put("ShortName", user.getShortName());
            row.put("Email", user.getEmail());
            row.put("Telphone", user.getTelphone());
            row.put("CellPhone", user.getCellphone());
            list.add(row);
        }

        HashMap map = new HashMap();
        map.put("totalSize", list.size());
        map.put("data", list);
        JSONObject jSon = new JSONObject(map);
        getResponse().setContentType("text/json; charset=utf-8");
        getResponse().getWriter().write(jSon.toString());
        System.out.println(jSon.toString());
        return null;
    }

    public String GetOneUser() throws IOException {
        String userID = getRequest().getParameter("UserID");
        Userinfo user = userdao.findById(userID);
        List<Map<String, Object>> list = new ArrayList<Map<String, Object>>();
        Map<String, Object> row = new HashMap<String, Object>();
        row.put("UserID", user.getUserId());
        row.put("UserName", user.getUserName());
        row.put("UserPassword", user.getUserPassword());
        row.put("RoleList", user.getRoleList());
        row.put("FuncList", user.getFuncList());
        row.put("Sex", user.getSex());
        row.put("WenHua", user.getWenHua());
        row.put("Age", user.getAge());
        row.put("ShortName", user.getShortName());
        row.put("Email", user.getEmail());
        row.put("Telphone", user.getTelphone());
        row.put("CellPhone", user.getCellphone());
        row.put("DepID", user.getDeptID());
        list.add(row);

        HashMap<String, Object> map = new HashMap<String, Object>();
        map.put("totalSize", list.size());
        map.put("data", list);
        JSONObject jSon = new JSONObject(map);
        getResponse().setContentType("text/json; charset=utf-8");
        getResponse().getWriter().write(jSon.toString());
        System.out.println(jSon.toString());
        return null;
    }

    public String SaveUser() throws IOException {
        if (getRequest().getParameter("action").equals("edit")) {
            Userinfo edituser = userdao.findById(UserID);
            edituser.setUserId(UserID);
            edituser.setUserName(UserName);
            edituser.setUserPassword(UserPassword);
            edituser.setRoleList(RoleList);
            edituser.setFuncList(FuncList);
            edituser.setDeptID(DepID);
            userdao.getHibernateTemplate().update(edituser);
            getResponse().getWriter().write("{success:true,info:'success'}");
        } else if (getRequest().getParameter("action").equals("add")) {
            Userinfo edituser = new Userinfo();
            edituser.setUserId(UserID);
            edituser.setUserName(UserName);
            edituser.setUserPassword(UserPassword);
            edituser.setRoleList(RoleList);
            edituser.setFuncList(FuncList);
            edituser.setDeptID(DepID);
            userdao.getHibernateTemplate().save(edituser);
            getResponse().getWriter().write("{success:true,info:'success'}");
        } else if (getRequest().getParameter("action").equals("del")) {
            String userID = getRequest().getParameter("UserID");
            Userinfo deluser = userdao.findById(userID);
            userdao.delete(deluser);
            getResponse().getWriter().write("{success:true,info:'success'}");
        }
        return null;
    }

    public UserinfoDAO getUserdao() {
        return userdao;
    }

    public void setUserdao(UserinfoDAO userdao) {
        this.userdao = userdao;
    }

    public Integer getSex() {
        return sex;
    }

    public void setSex(Integer sex) {
        this.sex = sex;
    }

    public String getWenHua() {
        return wenHua;
    }

    public void setWenHua(String wenHua) {
        this.wenHua = wenHua;
    }

    public Integer getAge() {
        return age;
    }

    public void setAge(Integer age) {
        this.age = age;
    }

    public String getShortName() {
        return shortName;
    }

    public void setShortName(String shortName) {
        this.shortName = shortName;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }

    public String getTelphone() {
        return telphone;
    }

    public void setTelphone(String telphone) {
        this.telphone = telphone;
    }

    public String getCellphone() {
        return cellphone;
    }

    public void setCellphone(String cellphone) {
        this.cellphone = cellphone;
    }

    public String getUserID() {
        return UserID;
    }

    public void setUserID(String userID) {
        UserID = userID;
    }

    public String getUserName() {
        return UserName;
    }

    public void setUserName(String userName) {
        UserName = userName;
    }

    public String getUserPassword() {
        return UserPassword;
    }

    public void setUserPassword(String userPassword) {
        UserPassword = userPassword;
    }

    public String getRoleList() {
        return RoleList;
    }

    public void setRoleList(String roleList) {
        RoleList = roleList;
    }

    public String getFuncList() {
        return FuncList;
    }

    public void setFuncList(String funcList) {
        FuncList = funcList;
    }

    public Integer getDepID() {
        return DepID;
    }

    public void setDepID(Integer depID) {
        DepID = depID;
    }
}

 

Department

 

package com.newsoft.struts.action;

import java.io.IOException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.Iterator;
import java.util.List;
import java.util.Map;

import com.newsoft.superOA.PO.*;
import com.newsoft.superOA.Util.JSONObject;

public class DeptService extends BaseAction {

    private Integer depId;
    private String depCode;
    private String depName;
    private String comment;
    private DepartmentinfoDAO depdao;
    
    public String GetDeptList() throws IOException {
        Iterator ir = depdao.findAll().iterator();
        List list = new ArrayList();

        while (ir.hasNext()) {
            Departmentinfo dept = (Departmentinfo) ir.next();
            Map<String, Object> row = new HashMap<String, Object>();
            row.put("DepID", dept.getDepId());
            row.put("DepCode", dept.getDepCode());
            row.put("DepName",dept.getDepName());
            row.put("Comment", dept.getComment());
            list.add(row);
        }
        HashMap map = new HashMap();
        map.put("totalSize", list.size());
        map.put("data", list);
        JSONObject jSon = new JSONObject(map);
        getResponse().setContentType("text/json; charset=utf-8");
        getResponse().getWriter().write(jSon.toString());
        System.out.println(jSon.toString());
        return null;
    }

    public Integer getDepId() {
        return depId;
    }

    public void setDepId(Integer depId) {
        this.depId = depId;
    }

    public String getDepCode() {
        return depCode;
    }

    public void setDepCode(String depCode) {
        this.depCode = depCode;
    }

    public String getDepName() {
        return depName;
    }

    public void setDepName(String depName) {
        this.depName = depName;
    }

    public String getComment() {
        return comment;
    }

    public void setComment(String comment) {
        this.comment = comment;
    }

    public DepartmentinfoDAO getDepdao() {
        return depdao;
    }

    public void setDepdao(DepartmentinfoDAO depdao) {
        this.depdao = depdao;
    }
}

 

刚学Ext  还是感觉写的很笨的。。希望高手多指教