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,"张三","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);
} }
效果图：
Ext4 MVC CRUD操作的更多相关文章
- ASP.NET Core MVC+Layui使用EF Core连接MySQL执行简单的CRUD操作
前言: 本章主要通过一个完整的示例讲解ASP.NET Core MVC+EF Core对MySQL数据库进行简单的CRUD操作,希望能够为刚入门.NET Core的小伙伴们提供一个完整的参考实例.关于 ...
- ASP.NET Core Web API Cassandra CRUD 操作
在本文中,我们将创建一个简单的 Web API 来实现对一个 “todo” 列表的 CRUD 操作,使用 Apache Cassandra 来存储数据,在这里不会创建 UI ,Web API 的测试将 ...
- 【ASP.NET Web API教程】2.1 创建支持CRUD操作的Web API
原文 [ASP.NET Web API教程]2.1 创建支持CRUD操作的Web API 2.1 Creating a Web API that Supports CRUD Operations2.1 ...
- MVC3和MVC4中CRUD操作
MVC3中EF实现的CRUD操作 public class HomeController : Controller { // // GET: /Home/ CarModelContainer db = ...
- Bootstrap+Knockout.JS+ASP.Net MVC3+PetaPOCO实现CRUD操作
Bootstrap+Knockout.JS+ASP.Net MVC3+PetaPOCO实现CRUD操作 1.需求: 1.1)页面要美观大气 1.2)前端代码要简洁清晰,要用MVC或是MVVM框架 1. ...
- Asp.Net Web API 2(CRUD操作)第二课
Asp.Net Web API 2(CRUD操作)第二课 Asp.Net Web API 导航 Asp.Net Web API第一课:入门http://www.cnblogs.com/aehyok ...
- Asp.net Webform 使用Repository模式实现CRUD操作代码生成工具
Asp.net Webform 使用Repository模式实现CRUD操作代码生成工具 介绍 该工具是通过一个github上的开源项目修改的原始作者https://github.com/Supere ...
- [Beego模型] 二、CRUD 操作
[Beego模型] 一.ORM 使用方法 [Beego模型] 二.CRUD 操作 [Beego模型] 三.高级查询 [Beego模型] 四.使用SQL语句进行查询 [Beego模型] 五.构造查询 [ ...
- SpringMVC 使用 RESTful 架构实现 CRUD 操作
软件152 余建强 源码下载:http://download.csdn.net/detail/qq_35318576/9826210 1 使用框架 SpringMVC.Maven.Ajax.JSTL. ...
随机推荐
- 开心学习系列学习笔记－－－－－nodejs缺点
不支持故障恢复 不知你是否在调试的过程中注意,当程序有错误发生时,整个进程就会结束,需要重 新在终端中启动服务器.这一点在开发中无可厚非,但在产品环境下就是严重的问题 了,因为一旦用户访问时触 ...
- ACdream 1017 Fast Transportation
http://acdream.info/problem?pid=1017 题意:给n个点,m条边,K个货物,要从从S到T,每天每条边最多只能经过1次,求要几天能运完 思路:拆成分层图,每层向下一层连边 ...
- POJ 2778 DNA Sequence (AC自动机,矩阵乘法)
题意:给定n个不能出现的模式串,给定一个长度m,要求长度为m的合法串有多少种. 思路:用AC自动机,利用AC自动机上的节点做矩阵乘法. #include<iostream> #includ ...
- Eclipse配置JDK的源代码的src.zip
Eclipse配置JDK的源代码的src.zip包很简单.只需要简单的几个步骤. 1.点 “window”-> “Preferences” -> “Java” -> “Install ...
- heritrix 3.2.0 -- 环境搭建
heritrix作为一个比较经典的开源爬虫,写这篇文章目的是因为,3.X之后的heritrix的介绍以及配置的文章比较少了. heritrix 3.x 以后使用maven 2配置jar包引用,但是总是 ...
- centos 6.5 hadoop 2.3 初配置
为了安装hadoop废了好大的劲才把esxi5.5给装好. 同时装了centos6.5,由于hadoop里面有个免密码登陆所以这里讲的就是免密码登陆. 看了大家的博客文章发现转发的一部分,写ubunt ...
- Linux Shell脚本编程－－nc命令使用详解
linux nc命令使用详解 功能说明:功能强大的网络工具 语 法:nc [-hlnruz][-g<网关...>][-G<指向器数目>][-i<延迟秒数>] ...
- Dom4j解析xml格式的字符串【java】
一般我们会使用dom4j.SAX.w3c来解析xml文件,网上也大多提供此类解决方案. 但在实际项目中,也有会解析xml格式的字符串报文的. 比如,有如下字符串: String = "< ...
- 基础总结篇之九：Intent应用详解
看似尋常最奇崛,成如容易卻艱辛.北宋.王安石 看似普通的事情其实最不同寻常,并不是简简单单就可以做好的:成功看起来似乎很容易,而成功的过程却充满着艰辛. 对于我们认为很普通的事情,不屑一顾,就永远不会 ...
- sql语句中BEGIN TRAN...COMMIT TRAN
BEGIN TRAN标记事务開始 COMMIT TRAN 提交事务 一般把DML语句(select ,delete,update,insert语句)放在BEGIN TRAN...COMMIT TR ...