Ext4 MVC CRUD操作

项目目录结构如下:

(1)index.html

<!DOCTYPE html>
<html>
    <head>
        <title>用户管理</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="ext4/resources/css/ext-all.css">
        <script type="text/javascript" src="ext4/ext-all.js"></script>
        <script type="text/javascript" src="ext4/ext-lang-zh_CN.js"></script>
        <script type="text/javascript" src="app.js"></script>
    </head>
    <body>
    </body>
</html>

(2)app.js

Ext.Loader.setConfig({enabled:true});

Ext.application({
    requires: [‘Ext.container.Viewport‘],
    name: ‘AM‘,

    appFolder: ‘app‘,

    controllers: [
        ‘Users‘
    ],

    launch: function(){
        Ext.create(‘Ext.container.Viewport‘,{
            layout: ‘fit‘,
            items: {
                xtype: ‘userlist‘
            }
        });
    }
});

(3)controller/Users.js

Ext.define(‘AM.controller.Users‘, {
    extend: ‘Ext.app.Controller‘,

    models:[
        ‘User‘
    ],

    stores: [
      ‘Users‘
    ],

    views:[
      ‘user.List‘,
      ‘user.Edit‘,
      ‘user.Add‘
    ],

    init: function(){
        this.control({
            ‘viewport > userlist‘: {
                itemdblclick: this.editUser
            },
            ‘useredit button[action=update]‘:{
                click: this.updateUser
            },
            ‘userlist button[action=add]‘:{
                click: this.addUser
            },
            ‘useradd button[action=create]‘:{
                click: this.createUser
            },
            ‘userlist button[action=destroy]‘:{
                click: this.destroyUser
            }
        });
    },

    addUser: function(button){
        var view = Ext.widget(‘useradd‘);
        view.show();
    },

    createUser: function(button){
        var win = button.up(‘window‘);
        var form = win.down(‘form‘);

        Ext.Ajax.request({
            url:‘/extjstest/UserServlet.do‘,
            params: form.getValues(),
            method: ‘POST‘,
            callback: function(options, success, response) {
                if(success){
                    win.close();
                    var responsejson = Ext.JSON.decode(response.responseText);
                    var no = responsejson.no;
                    Ext.Msg.confirm(‘操作结果!‘, responsejson.msg, function(btn) {
                        if (no === ‘1‘ && btn === ‘yes‘) {
                           Ext.widget(‘userlist‘).store.load();
                        }
                    });
                }else{
                    Ext.Msg.confirm(‘操作失败!‘, ‘请求超时或网络故障,错误编号:[‘ + response.status + ‘]是否要重新发送?‘, function(btn) {
                        if (btn === ‘yes‘) {
                            Ext.Ajax.request(options);
                        }
                    });
                }
            }
        });
    },

    destroyUser: function(button){
      var rowSelectionModel = Ext.widget(‘userlist‘).getSelectionModel();
      if (rowSelectionModel.hasSelection()) {
          var records = rowSelectionModel.getSelection();
          var len = records.length;
          var idarr = new Array();
          for(var i=0;i<len;i++){
              idarr[i] = records[i].get(‘id‘);
          }
          var idarrjson = Ext.JSON.encode(idarr);//转换成JSON格式

          Ext.MessageBox.confirm(‘提示信息‘, ‘<font color=red>您确定删除所选中的信息?</font>‘, showResult);
          function showResult(btn){
              if(btn===‘yes‘){
                    Ext.Ajax.request({
                        url: ‘/extjstest/UserServlet.do‘,
                        params: {
                            oprtype: ‘destroy‘,
                            idarrjson: idarrjson
                        },
                        method: ‘POST‘,
                        callback: function(options, success, response) {
                            if (success) {
                                var responsejson = Ext.JSON.decode(response.responseText);
                                var no = responsejson.no;
                                Ext.Msg.confirm(‘操作结果提醒!‘, responsejson.msg, function(btn) {
                                    if (no === ‘1‘ && btn === ‘yes‘) {
                                        Ext.widget(‘userlist‘).store.load();
                                    }
                                });
                            } else {
                                Ext.Msg.confirm(‘操作失败!‘, ‘请求超时或网络故障,错误编号:[‘ + response.status + ‘]是否要重新发送?‘, function(btn) {
                                    if (btn === ‘yes‘) {
                                        Ext.Ajax.request(options);
                                    }
                                });
                            }
                        }
                    });
                }
          }
      }else{
          Ext.MessageBox.alert(‘信息提示‘, ‘<font color=red>请选择您要删除的行!</font>‘);
      }
    },

    editUser: function(grid,record){
        var view = Ext.widget(‘useredit‘);
        view.down(‘form‘).loadRecord(record);
    },

    updateUser: function(button){
        var win = button.up(‘window‘);
        var form = win.down(‘form‘);

        var record = form.getRecord(); //取出表单关联的 record
        var values = form.getValues(); //取出表单中的值

        record.set(values); //把表单值设置到对应的 record

        win.close();//关闭窗口

        //此种方式更新数据将采用json数据格式把参数发送到服务端,服务端接受此种参数时不能使用
        //传统的request.getParameter()的方式,其参数是通过Request Payload传递给服务端的,
        //服务端只能通过读入request的字符流,通过解析json来获取参数值
        this.getUsersStore().sync();
    }
});

(4)model/User.js

Ext.define(‘AM.model.User‘, {
    extend: ‘Ext.data.Model‘,
    fields: [‘id‘,‘name‘,‘email‘]
});

(5)store/Users.js

Ext.define(‘AM.store.Users‘, {
    extend: ‘Ext.data.Store‘,
    model: ‘AM.model.User‘,
    autoLoad: true,//Store生成之后会自动让Proxy加载数据

    proxy: {
        type: ‘ajax‘,
        api:{
            read: ‘/extjstest/UserServlet.do?oprtype=read‘,
            update: ‘/extjstest/UserServlet.do?oprtype=update‘
        },
        reader: {//reader负责将response解码成store能理解的形式
            type: ‘json‘,
            root: ‘users‘
        }
    }
});

(7)view/user/List.js

Ext.define(‘AM.view.user.List‘, {
    extend: ‘Ext.grid.Panel‘,
    alias: ‘widget.userlist‘,

    title: ‘用户列表‘,
    columnLines: true,
    loadMask: true,

    store: ‘Users‘,

    selModel: Ext.create(‘Ext.selection.CheckboxModel‘,{ checkOnly :true }),//复选框

    initComponent: function(){
        this.columns = [
            Ext.create(‘Ext.grid.RowNumberer‘, {text: ‘行号‘, width: 35}),
            {header:‘ID‘, dataIndex:‘id‘, flex:1},
            {header:‘NAME‘, dataIndex:‘name‘, flex:1},
            {header:‘EMAIL‘, dataIndex:‘email‘, flex:1}
        ];

        this.dockedItems = [
            {
                xtype: ‘toolbar‘,
                dock: ‘top‘,
                items: [
                    {
                        xtype: ‘button‘,
                        text: ‘添加‘,
                        action:‘add‘
                    },
                    ‘-‘,
                    {
                        xtype: ‘button‘,
                        text: ‘删除‘,
                        action: ‘destroy‘
                    }
                ]
            }
        ];

        this.callParent(arguments);
    }
});

(8)view/user/Add.js

Ext.define(‘AM.view.user.Add‘, {
    extend: ‘Ext.window.Window‘,
    alias: ‘widget.useradd‘,

    title: ‘添加用户‘,
    layout: ‘fit‘,
    autoShow: true,

    initComponent: function(){
        this.items = [
            {
                xtype: ‘form‘,
                items: [
                    {
                        xtype: ‘textfield‘,
                        name: ‘name‘,
                        fieldLabel: ‘名称‘
                    },
                    {
                        xtype: ‘textfield‘,
                        name: ‘email‘,
                        fieldLabel: ‘邮箱‘
                    },
                    {
                        xtype: ‘hidden‘,
                        name: ‘oprtype‘,
                        value: ‘create‘
                    }
                ]
            }
        ];

        this.buttons = [
            {
                text: ‘保存‘,
                action: ‘create‘
            },
            {
                text: ‘取消‘,
                scope: this,
                handler: this.close
            }
        ];

        this.callParent(arguments);
    }
});

(9)view/user/Edit.js

Ext.define(‘AM.view.user.Edit‘, {
    extend: ‘Ext.window.Window‘,
    alias: ‘widget.useredit‘,

    title: ‘编辑用户信息‘,
    layout: ‘fit‘,
    autoShow: true,

    initComponent: function(){
        this.items = [
            {
                xtype: ‘form‘,
                items: [
                    {
                        xtype: ‘hidden‘,
                        name: ‘id‘
                    },
                    {
                        xtype: ‘textfield‘,
                        name: ‘name‘,
                        fieldLabel: ‘姓名‘
                    },
                    {
                        xtype: ‘textfield‘,
                        name: ‘email‘,
                        fieldLabel: ‘邮箱‘
                    }
                ]
            }
        ];

        this.buttons = [
            {
                text:‘保存‘,
                action:‘update‘
            },
            {
                text: ‘取消‘,
                scope: this,
                handler: this.close
            }
        ];

        this.callParent(arguments);
    }
});

(10)UserServlet.java

package com.yan.servlet;

import com.google.gson.Gson;
import com.google.gson.reflect.TypeToken;
import java.io.BufferedReader;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 *
 * @author y
 */
public class UserServlet extends HttpServlet {

    protected void processRequest(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");

        String oprtype = request.getParameter("oprtype");
        StringBuilder sb = new StringBuilder();

        try (PrintWriter out = response.getWriter()) {
            Gson gson = new Gson();
            switch(oprtype){
                case "read":
                    sb.append("{\"users\":")
                      .append(gson.toJson(getUserList(), new TypeToken<List<User>>(){}.getType()))
                      .append("}");
                    break;
                case "update":
                    StringBuilder json = new StringBuilder();
                    String line;
                    BufferedReader reader = request.getReader();
                    while((line=reader.readLine())!=null){
                        json.append(line);
                    }
                    User user = gson.fromJson(json.toString(), User.class);
                    System.out.println("id:"+user.id);
                    System.out.println("name:"+user.name);
                    System.out.println("email:"+user.email);

                    sb.append("{\"no\":\"1\",\"msg\":\"成功\"}");
                    break;
                case "create":
                    System.out.println("name:"+request.getParameter("name"));
                    System.out.println("email:"+request.getParameter("email"));

                    sb.append("{\"no\":\"1\",\"msg\":\"成功\"}");
                    break;
                case "destroy":
                    String idarrjson = request.getParameter("idarrjson");
                    List<String> ids = gson.fromJson(idarrjson, new TypeToken<List<String>>(){}.getType());
                    System.out.println(ids);
                    sb.append("{\"no\":\"1\",\"msg\":\"成功\"}");
                    break;
            }

            out.print(sb.toString());
            out.close();
        }
    }

    List<User> getUserList(){
        List<User> list = new ArrayList<>();
        User user = new User(100,"张三","[email protected]");
        list.add(user);
        user = new User(101,"李四","[email protected]");
        list.add(user);
        user = new User(102,"王五","[email protected]");
        list.add(user);
        user = new User(103,"王五","[email protected]");
        list.add(user);
        return list;
    }

    public static final class User{
        public int id;
        public String name;
        public String email;
        public User(int id,String name,String email){
            this.id = id;
            this.name = name;
            this.email = email;
        }
    }

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        processRequest(request, response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        processRequest(request, response);
    }

}

效果图:

时间: 2024-10-12 07:25:39

Ext4 MVC CRUD操作的相关文章

Spring MVC + Hibernate + Maven: Crud操作示例

Alexey是一个在使用Java,TestNG 和Selenium的自动化WEB应用程序中有丰富经验的测试开发者.他如此的喜欢QA以至于在下班后他为初级QA工程师提供培训课程. 在这篇文章中我想介绍一个Spring MVC + Hibernate + Maven例子.这组技术主要涉及一些基础知识,我想在每一个必要的地方详细解释它.本篇话题范围以外的更多资源,我会提供链接方便你阅读.在文章的最后,我将发布一个GitHub的链接. 目标 示例web应用程序是基于Spring MVC, Hiberna

自制MVC框架CRUD操作、列表、分页显示插件介绍

这里涉及到的操作都是引用自Stephen.DALService数据层.数据访问层实现方式在后文中我会仔细的说明,先说明一下数据操作集成的插件. 1).InsertAttribute 用于插入记录. 状态返回值:假定hashtable传递变量名的是context ,那么返回值可通过context[InsertAttribute.ValueKey]得到,推荐返回的是插入的主键ID值,当然这个是由数据层设定的. 有以下属性可进行设置: 属性名 作用 默认值 选项说明 其它说明 Key 映射路径.格式如

MVC Controller操作 CRUD

2011-12-20 22:40 1824人阅读 评论(0) 收藏 举报 分类: asp.net MVC(6) 版权声明:本文为博主原创文章,未经博主允许不得转载. Controller操作 主要简单备忘增.删.查.改的Controller一般操作方法,操作对象为Students实体.context为上下文连接 students对象包括name,age,sex信息,操作页面都是在MVC3中使用强类型.Razor模版建立的. 1.定义查询Index [csharp] view plain copy

MVC3和MVC4中CRUD操作

MVC3中EF实现的CRUD操作 public class HomeController : Controller { // // GET: /Home/ CarModelContainer db = new CarModelContainer(); #region 查询所有 +Index() public ActionResult Index() { List<CarModel> list = (from c in db.CarModel select c).ToList(); //View

ASP.NET Core Web API Cassandra CRUD 操作

在本文中,我们将创建一个简单的 Web API 来实现对一个 “todo” 列表的 CRUD 操作,使用 Apache Cassandra 来存储数据,在这里不会创建 UI ,Web API 的测试将使用 Postman 来完成. ASP.NET Core 是 ASP.NET 的重大的重构,ASP.NET Core 是一个全新的开源和跨平台的框架,用于构建如 Web 应用.物联网(IoT)应用和移动后端应用等连接到互联网的基于云的现代应用程序. ASP.NET Core 已经内置了用 MVC 架

【原】Bootstrap+Knockout.JS+ASP.Net MVC3+PetaPOCO实现CRUD操作

1.需求: 1.1)页面要美观大气 1.2)前端代码要简洁清晰,要用MVC或是MVVM框架 1.3)服务端要用MVC框架,要Rest风格 1.4)数据访问要用ORM 2.效果: 2.1)列表 2.2)分页 2.3)新增 2.4)修改 3.技术考虑: 3.1)考虑到页面的美观大气,在没有美工的情况下,Bootstrap的确是一个很好的选择 3.2)前端框架选择了MVVM的Knockout.JS,大概是因为Microsoft在自己的项目模板里都自带了这个框架吧,所以一直对它挺有好感 3.3)ASP.

Asp.net Webform 使用Repository模式实现CRUD操作代码生成工具

Asp.net Webform 使用Repository模式实现CRUD操作代码生成工具 介绍 该工具是通过一个github上的开源项目修改的原始作者https://github.com/Superexpert/WebFormsScaffolding 我在他的基础上添加了一对多实体类的新增,修改,删除操作,并实现了Repository设计模式,修改了一些页面布局,添加了一些DynamicData动态字段,我的开源项目地址https://github.com/neozhu/WebFormsScaf

学习SpringMVC(十五)之CRUD操作

使用SpringMVC完成相应的CRUD操作,静态数据来模仿从数据库中取数据. 下面从创建的类说起,一共定义了5个类,分类是DepartmentDao,EmployeeDao,Department,Employee,EmployeeHandler 代码如下: package com.cgf.springmvc.crud.dao; import java.util.Collection; import java.util.HashMap; import java.util.Map; import

Hibernate对象的CRUD操作

1.  Hibernate对象的CRUD操作 1.1.  对象的三种状态 瞬时(Transient) - 由new操作符创建,且尚未与HibernateSession 关联的对象被认定为瞬时(Transient)的.瞬时(Transient)对象不会被持久化到数据库中,也不会被赋予持久化标识(identifier).如果瞬时(Transient)对象在程序中没有被引用,它会被垃圾回收器(garbage collector)销毁.使用Hibernate Session可以将其变为持久(Persis