Ext4 MVC CRUD操作

news2024/2/27 5:02:23

项目目录结构如下:

(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,"张三","zhangsan@123.com");
        list.add(user);
        user = new User(101,"李四","lisi@123.com");
        list.add(user);
        user = new User(102,"王五","wangwu@123.com");
        list.add(user);
        user = new User(103,"王五","wangwu@123.com");
        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);
    }

}

效果图:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://nwjs.net/news/300069.html

如若内容造成侵权/违法违规/事实不符,请联系七分地网进行投诉反馈,一经查实,立即删除!

相关文章

手机拍视频,实时换背景,继马卡龙玩图后,Versa又出了一款更厉害的App

郭一璞 发自 凹非寺 量子位 报道 | 公众号 QbitAI在前不久荣耀9X的发布会上&#xff0c;一个名叫绿幕侠的App亮相了。现场的展示中&#xff0c;这个App能让手机拍摄的视频&#xff0c;产生电影绿幕一般的效果&#xff0c;实时从视频中去掉背景&#xff0c;只保留主角人物&#…

html中多边形图形怎么制作,CSS制作图形速查表

前面在《纯CSS制作的图形效果》一文中介绍了十六种CSS画各种不同图形的方法。今天花了点时间将这方面的制作成一份清单&#xff0c;方便大家急用时有地方可查。别的不多说了&#xff0c;直接看代码。为了节省时间&#xff0c;下面图形都采用的一个标签&#xff0c;可以是块元素…

unity学习

2019独角兽企业重金招聘Python工程师标准>>> 1.发布ios应用的时候会生成一个xcode工程。已经发布过ios&#xff0c;再次发布的时候可以选择replace 或者是append原xcode工程。如果ios工程是不同unity版本创建的&#xff0c;那么不能append。但是如果我们修改过ios的…

腾讯AI击败王者荣耀职业队,全靠自学、策略清奇,一天训练量为人类440年

问耕 发自 麦蒿寺量子位 出品 | 公众号 QbitAI王者峡谷&#xff0c;风云突变。一场激烈的对战正在进行&#xff0c;左侧是五位人类职业电竞高手组成的赛区联队&#xff0c;另一方是……嗯&#xff1f;他们的对手没有出场&#xff1f;五个座椅空空荡荡&#xff1f;不。他们的对手…

mfc 内嵌 本地html,MFC程序中内嵌网页,附示例工程

最近在课程设计&#xff0c;因为小悠太懒了&#xff0c;是在不想用C完成一些简单的文件上传下载操作&#xff0c;于是就想着将网页内嵌到程序中&#xff0c;上传下载神马的就直接使用网页Web来完成就好了&#xff0c;本示例中将演示在MFC程序中内嵌一个html网页介绍一下原理首先…

最高5000倍加速模拟物理世界,育碧在修复bug上又进一步

晓查 发自 凹非寺量子位 出品 | 公众号 QbitAI“买bug送游戏”对育碧游戏的玩家来说简直是常态。即使是育碧的当家游戏《刺客信条》、《孤岛惊魂》系列也是bug也是多到令人发指。比如《刺客信条&#xff1a;大革命》中&#xff0c;主角的脸部建模突然失控&#xff0c;变成一张“…

AI帮你靠“想象”打字:手机电脑软键盘也能盲打了,准确率能达到95%

铜灵 发自 凹非寺量子位 出品 | 公众号 QbitAI有了机器学习&#xff0c;没有软键盘还能照样打字。凭啥&#xff1f;凭想象。来自韩国科学技术高级研究院在一项最新研究中&#xff0c;提出了一种完全靠想象的键盘&#xff1a;I-Keyboard&#xff0c;这个界面上看不到软键盘上的字…

php curl 内容采集

2019独角兽企业重金招聘Python工程师标准>>> function contentCollection($url){$data array(list>null,status>0);if(!$url){$data[info] 请传入采集地址;return $data;}if(!preg_match("/^http/", $url)){$url http://.$url;}preg_match("…

文科生如何入门机器学习:先看看这篇零基础教程,再多算几遍吧

晓查 发自 凹非寺量子位 出品 | 公众号 QbitAIAI技术变得越来越热门&#xff0c;很多人开始转行进入这一领域&#xff0c;其中当然也不乏文科生。他们在普遍缺乏大学数学知识的情况下&#xff0c;就不能入门机器学习了吗&#xff1f;最近有位Reddit网友David Code&#xff0c;他…

B站最火数学视频3Blue1Brown是如何制作的

授权转发自 知乎网友 李狗嗨原文地址&#xff1a;https://www.zhihu.com/question/57357012/answer/723888621相信很多人都知道3Blue1Brown&#xff0c;这是一个由斯坦福大学的数学系学生Grant Sanderson 创建的YouTube 频道。该频道从独特的视觉角度解说高等数学&#xff0c;内…

计算机硬件与游戏发展史,电脑硬件的发展历程中 什么是电竞SSD?

原标题&#xff1a;电脑硬件的发展历程中 什么是电竞SSD&#xff1f;身处21世纪的人们&#xff0c;早已经习惯了各类电子设备的充斥&#xff0c;并全方位的体验着智能设备所带来的便利。那么&#xff0c;我们平常所熟知的计算机设备&#xff0c;到底由那些重要部件组成&#xf…

滴滴正式分拆无人车业务,复刻Uber上市路径,传孙正义再加持

李根 发自 凹非寺 量子位 报道 | 公众号 QbitAI滴滴无人车&#xff0c;终于也官宣分拆了。今天&#xff08;8月5日&#xff09;滴滴出行宣布旗下自动驾驶部门&#xff0c;升级为独立公司&#xff0c;专注于自动驾驶研发、产品应用及相关业务拓展。滴滴出行CTO张博兼任自动驾驶新…

unity3d 动画中断并重新播放的解决办法

为什么80%的码农都做不了架构师&#xff1f;>>> 如果想中断某个正在播放的动画&#xff0c;然后重新播放&#xff1f; 比如玩家被敌人击中了&#xff0c;正在播放被击中的动画&#xff0c;不巧紧接着玩家又被敌人击中一次&#xff0c;此时就得中断动画并重新播放。…

BAT华为美团头条面试考什么?这份GitHub万星资源,告诉你面试题+答案+出题人分析...

铜灵 发自 凹非寺量子位 出品 | 公众号 QbitAI2020校招脚步临近&#xff0c;怎样备战即将到来的面试&#xff0c;在众多面试者中脱颖而出惊艳到面试官&#xff0c;化身大厂Offer收割机&#xff1f;GitHub上就有这样一个万星资源&#xff0c;整理了BAT华为、滴滴、头条等大厂可能…

FILO微型计算机,IBM-PC微机组成原理(ppt48)-咨询报告【PPT课件】

IBM-PC微机组成原理(ppt48)-咨询报告【PPT课件】2020-09-24 08:52:06【导读】微型计算机中的中央处理器也叫微处理器。运算器和控制器。件完成指定功能的各项操作。主存储器是用于存放程序和数据的部件。对每个存储单元内容的存和取是按照地址进。储一个二进制数0或1。每8位组成…

免费机器学习课程爆红:从概率与统计到全栈深度学习,英伟达工程师小姐姐整理...

乾明 发自 凹非寺 量子位 报道 | 公众号 QbitAI有一份适合按顺序依次学习的免费机器学习资源&#xff0c;在Twitter上火了。一天之间便获得5.9K点赞和1.5K转发。评论区中&#xff0c;”Thanks for sharing“此起彼伏&#xff0c;还有不少人呼朋唤友来观看。那么&#xff0c;这到…

[怪谈]唯有数学不会因时代的变迁而没落

前几天有个网友告诉我&#xff1a;数学在编程过程中完全没有用。我没反驳他&#xff0c;今天放出一篇“扯淡“文&#xff0c;来给大家洗洗脑。好多年前&#xff0c;我在某个公司做兼职顾问时&#xff0c;曾经给当时的老板扯淡过一个理论&#xff0c;当然那时还小小的杜撰了一篇…

GitHub趋势榜第一:用小姐姐自拍,生成二次元萌妹子,神情高度还原,反过来也可以...

栗子 发自 凹非寺量子位 报道 | 公众号 QbitAI如何能让一个小姐姐属于你&#xff1f;把她变成二次元的人类&#xff0c;就可以解锁一个老婆了。韩国游戏公司NCSOFT&#xff0c;最近开源了一只技艺精湛的AI。只要任意输入小姐姐的自拍&#xff0c;就能得到她在二次元的样子了&am…

围剿Sci-Hub力度升级!全球最大学术出版商:网址你也不要提,不然就发律师函...

鱼羊 晓查 发自 凹非寺量子位 出品 | 公众号 QbitAI全球最大学术出版商Elsevier再惹争议&#xff0c;他们又把枪口对准了提供论文免费下载的Sci-Hub。而且&#xff0c; 颇有“赶尽杀绝”的意味。提供文献整理工具的Citationsy发表博客文章表示&#xff0c;因为自己在博客中提供…