前端代码:

Ext.onReady(function(){
Ext.define('Person', {
extend: 'Ext.data.Model',
fields: [{name: 'id',
type: 'int',
useNull: true
}, 'email', 'first', 'last'],
validations: [{ type: 'length',
field: 'email',
min: 1
}, {type: 'length',
field: 'first',
min: 1
}, {type: 'length',
field: 'last',
min: 1
}]
});
//构造store
var store = Ext.create('Ext.data.Store', {
//autoLoad: true,
autoSync: true,
model: 'Person',
proxy: {
type: 'ajax',
api: {
read: '<%=basePath %>/AdminServlet?param=read',//查询
create: '<%=basePath %>/AdminServlet?param=add',//创建
update: '<%=basePath %>/AdminServlet?param=update',//更新
destroy: '<%=basePath %>/AdminServlet?param=deletes'//删除
},
reader: {
type: 'json',
root: 'data'
},
writer: {
type: 'json'
}
},
listeners: {
write: function(store, operation){
var record = operation.getRecords()[0],
name = Ext.String.capitalize(operation.action),
verb; if (name == 'Destroy') {
record = operation.records[0];
verb = 'Destroyed';
} else {
verb = name + 'd';
}
Ext.example.msg(name, Ext.String.format("{0} user: {1}", verb, record.getId()));
}
}
}); store.load({
params:{
start:0,
limit:20
}
});
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
id:'edit',
listeners: {
edit:function(rowEditing,context){
context.record.commit();
store.reload();//提交后重新加载 获取新数据 包括自动生成的id
},
cancelEdit: function(rowEditing, context) {
// Canceling editing of a locally added, unsaved record: remove it
if (context.record.phantom) {
store.remove(context.record);
}
}
}
}); //创建 panel
var grid = Ext.create('Ext.grid.Panel', {
renderTo: document.body,
plugins: [rowEditing],
width: 400,
height: 300,
frame: true,
title: 'Users',
store: store,
iconCls: 'icon-user',
columns: [{
text: 'ID',
width: 40,
sortable: true,
dataIndex: 'id'
}, {
text: 'Email',
flex: 1,
sortable: true,
dataIndex: 'email',
field: {
xtype: 'textfield'
}
}, {
header: 'First',
width: 80,
sortable: true,
dataIndex: 'first',
field: {
xtype: 'textfield'
}
}, {
text: 'Last',
width: 80,
sortable: true,
dataIndex: 'last',
field: {
xtype: 'textfield'
}
}],
dockedItems: [{
xtype: 'toolbar',
items: [{
text: 'Add',
iconCls: 'icon-add',
handler: function(){
// empty record
store.insert(0, new Person());//从指定索引处开始插入 插入Model实例 并触发add事件
rowEditing.startEdit(0, 0);//开始编辑,并显示编辑器 }
}, '-', {
itemId: 'delete',
text: 'Delete',
iconCls: 'icon-delete',
disabled: true,
handler: function(){
var selection = grid.getView().getSelectionModel().getSelection()[0];
if (selection) {
store.remove(selection);
}
}
}]
}]
});
grid.getSelectionModel().on('selectionchange', function(selModel, selections){
grid.down('#delete').setDisabled(selections.length === 0);
}); });

后台代码:

/**
* @author Lucare(fcs)
*
* 2015年1月9日
*/
public class AdminServlet extends HttpServlet {
private static final long serialVersionUID = 1L; private Connection con;
private List<Admin> admins;
private int count; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
} protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { try {
//根据参数param分发请求
String param = request.getParameter("param");
System.out.println(param);
Class.forName("com.mysql.jdbc.Driver");
con = DriverManager.getConnection("jdbc:mysql://localhost:3306/ext","root","root");
Gson gson = new Gson();
response.setCharacterEncoding("UTF-8");
if(param.equals("read")){
String start = request.getParameter("start");
String limit = request.getParameter("limit");
admins = findAll(start, limit);
count = totalCount();
response.getWriter().print("{total:"+count+",data:"+gson.toJson(admins)+"}");
}else if(param.equals("add")){
//extjs 以流的形式传递数据(json类型)
String msg = request.getReader().readLine();
Admin admin = gson.fromJson(msg, Admin.class);
add(admin);
}else if(param.equals("update")){
String msg = request.getReader().readLine();
Admin admin = gson.fromJson(msg, Admin.class);
update(admin);
}else if(param.equals("deletes")){
String msg = request.getReader().readLine();
Admin admin = gson.fromJson(msg, Admin.class);
del(admin);
}
} catch (Exception e) {
e.printStackTrace();
}finally{
closeCon();
}
} public List<Admin> findAll(String start,String limit){
List<Admin> adminlist = new ArrayList<Admin>();
try {
PreparedStatement ps = con.prepareStatement("select * from admins limit "+start+","+limit);
ResultSet rs = ps.executeQuery();
while(rs.next()){
Admin admin = new Admin();
admin.setId(rs.getInt(1));
admin.setEmail(rs.getString(2));;
admin.setFirst(rs.getString(3));
admin.setLast(rs.getString(4));
adminlist.add(admin);
}
} catch (SQLException e) {
e.printStackTrace();
}
return adminlist;
} public void add(Admin admin){
try {
PreparedStatement ps = con.prepareStatement("insert into admins values(null,?,?,?)");
ps.setString(1, admin.getEmail());
ps.setString(2, admin.getFirst());
ps.setString(3, admin.getLast());
ps.execute();
} catch (SQLException e) {
e.printStackTrace();
}
} public void del(Admin admin){
try {
PreparedStatement ps = con.prepareStatement("delete from admins where id=?");
ps.setInt(1, admin.getId());
ps.execute();
} catch (SQLException e) {
e.printStackTrace();
}
} public void update(Admin admin){
try {
PreparedStatement ps = con.prepareStatement("update admins set email=?,first=?,last=? where id=?");
ps.setString(1,admin.getEmail());
ps.setString(2,admin.getFirst());
ps.setString(3,admin.getLast());
ps.setInt(4, admin.getId());
ps.execute();
} catch (SQLException e) {
e.printStackTrace();
}
} public int totalCount(){
int total = 0;
try {
PreparedStatement ps = con.prepareStatement("select count(*) from admins");
ResultSet rs = ps.executeQuery();
if(rs.next()){
total = rs.getInt(1);
}
} catch (SQLException e) {
e.printStackTrace();
}
return total;
} public void closeCon(){
if(con!=null){
try {
con.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
} }

时间过得好快,虽然学了几天ExtJs,可是后来没有用上,在这里还是总结一下基本用法。ExtJs很强大,远不止我总结的这些,要想学好并熟练运用还是要花费一番功夫的。不过建议初学者学习时要针对版本,每个版本的差异还是比较大的。

ExtJs之列表常用CRUD的更多相关文章

  1. redis学习-散列表常用命令(hash)

    redis学习-散列表常用命令(hash)   hset,hmset:给指定散列表插入一个或者多个键值对 hget,hmget:获取指定散列表一个或者多个键值对的值 hgetall:获取所欲哦键值以及 ...

  2. python列表常用内建方法

    python列表常用内建方法: abc = ['a',1,3,'a'] #abc.pop(1) #删除索引1的值.结果['a', 3] #abc.append([123]) #结果:['a', 1, ...

  3. Python语言学习:列表常用的方法

    python 列表常用的方法 1.append( ):用于在列表末尾添加新的对象 list.appent(obj) #obj:添加到列表末尾的对象 #!/usr/bin/python aList = ...

  4. python3 字符串与列表常用功能

    一.字符串常用功能 1. capitalize(),将字符串的首字母变成大写,其余全部置为小写:如果字符串中有多个单词,也只是将第一个单词的首字母置为大写:例: >>> name = ...

  5. python基础之列表常用操作及知识点小结

    列表(list) List(列表) 是 Python 中使用最频繁的数据类型.列表可以完成大多数集合类的数据结构实现.它支持字符,数字,字符串甚至可以包含列表(所谓嵌套).列表用[ ]标识,是pyth ...

  6. Python自动化开发(三):循环次数控制、常用数据类型、字符串格式化、列表常用操作、列表的后续操作

    计数器的作用可以在死循环中,符合条件的情况下做自动退出中断 #!/usr/bin/env python # _*_ coding: utf-8 _*_ # @Time : 2017/3/14 11:2 ...

  7. Python_列表常用操作

    %d   数字 %f    浮点 %s    字符串 字符串常用功能: .strip()   默认去掉字符串两边空格#或者在括号里注明去除什么 查看列表方法:dir(列表名) .append(元素): ...

  8. Extjs 项目中常用的小技巧,也许你用得着(3)

    几天没写了,接着继续, 1.怎么获取表单是否验证通过: form.isValid()//通过验证为true 2.怎样隐藏列,并可勾选: hidden: true, 如果是动态隐藏的话: grid.ge ...

  9. list列表常用操作

    1.创建列表.只要把逗号分隔的不同的数据项使用方括号括起来即可 List = ['wade','james','bosh','haslem'] 2.使用 range() 创建数字列表 numbers ...

随机推荐

  1. Codeforces 671B/Round #352(div.2) D.Robin Hood 二分

    D. Robin Hood We all know the impressive story of Robin Hood. Robin Hood uses his archery skills and ...

  2. [洛谷P2051] [AHOI2009]中国象棋

    洛谷题目链接:[AHOI2009]中国象棋 题目描述 这次小可可想解决的难题和中国象棋有关,在一个N行M列的棋盘上,让你放若干个炮(可以是0个),使得没有一个炮可以攻击到另一个炮,请问有多少种放置方法 ...

  3. 社会网络分析——Social Network Analysis

    什么是社会网络分析,英文social network analysis.现在这个分析越来越时髦,也越来越显现其在社会科学的研究价值.我在2000年的时候受祝建华老师的邀请到香港城市大学作研究,接触到 ...

  4. 单词转换成向量形式 word2vec

    word2vec(word to vector)是一个将单词转换成向量形式的工具.可以把对文本内容的处理简化为向量空间中的向量运算,计算出向量空间上的相似度,来表示文本语义上的相 似度.word2ve ...

  5. 【洛谷 P3187】 [HNOI2007]最小矩形覆盖 (二维凸包,旋转卡壳)

    题目链接 嗯,毒瘤题. 首先有一个结论,就是最小矩形一定有条边和凸包重合.脑补一下就好了. 然后枚举凸包的边,用旋转卡壳维护上顶点.左端点.右端点就好了. 上顶点用叉积,叉积越大三角形面积越大,对应的 ...

  6. Apache服务器添加网站目录不在根目录的情况

    Apache原本根目录: /var/www 需要添加的新的Apache网站目录 /home/*** 在Apache服务器虚拟配置下添加一个站点 <VirtualHost *:> Serve ...

  7. java 深度拷贝 复制 深度复制

    1.深度拷贝.复制代码实现 最近需要用到比较两个对象属性的变化,其中一个是oldObj,另外一个是newObj,oldObj是newObj的前一个状态,所以需要在newObj的某个状态时,复制一个一样 ...

  8. 64_k1

    KoboDeluxe-0.5.1-22.fc26.x86_64.rpm 13-Feb-2017 22:11 1626454 k3b-17.04.1-1.fc26.x86_64.rpm 25-May-2 ...

  9. [转载]循规蹈矩:快速读懂SQL执行计划的套路与工具

    作者介绍 梁敬彬,福富研究院副理事长.公司唯一四星级内训师,国内一线知名数据库专家,在数据库优化和培训领域有着丰富的经验.多次应邀担任国内外数据库大会的演讲嘉宾,在业界有着广泛的影响力.著有多本畅销书 ...

  10. Deep Learning基础--26种神经网络激活函数可视化

    在神经网络中,激活函数决定来自给定输入集的节点的输出,其中非线性激活函数允许网络复制复杂的非线性行为.正如绝大多数神经网络借助某种形式的梯度下降进行优化,激活函数需要是可微分(或者至少是几乎完全可微分 ...