上次发了Easyui Datagrid的增删改查的使用学习记录后一直想整理下基于Extjs4.2的Grid学习使用记录。苦于抽不出时间,一直拖到现在。不得不说,Extjs确实很强大,新版的Neptune风格也很入我眼,但毕竟没怎么用过,第一次用,也不敢上来就搞什么自定义组件,也就纯粹的model+store+panel声明式创建表格了。

抛开分页,抛开排序,今天只简单讲一下最近使用中总结出来的rest形式增删改查数据的方式。发现这种方式挺不错的,故而分享下。
代码Example如下:

定义Model

01.Ext.define('Person', {
02.    extend: 'Ext.data.Model',
03.    fields: [{name: 'id',
04.        type: 'int',
05.        useNull: true
06.    }, 'email', 'first', 'last'],
07.    validations: [{ type: 'length',
08.        field: 'email',
09.        min: 1
10.    }, {type: 'length',
11.        field: 'first',
12.        min: 1
13.    }, {type: 'length',
14.        field: 'last',
15.        min: 1
16.    }]
17.});

构造store、创建panel

001.var store = Ext.create('Ext.data.Store', {
002.        autoLoad: true,
003.        autoSync: true,
004.        model: 'Person',
005.        proxy: {
006.             type: 'ajax',
007.             api: {
008.                read: 'url/read',//查询
009.                create: 'url/create',//创建
010.                update: 'url/update',//更新
011.                destroy: 'url/destroy'//删除
012.            },
013.            reader: {
014.                type: 'json',
015.                root: 'data'
016.            },
017.            writer: {
018.                type: 'json'
019.            }
020.        },
021.        listeners: {
022.            write: function(store, operation){
023.                var record = operation.getRecords()[0],
024.                    name = Ext.String.capitalize(operation.action),
025.                    verb;
026.                      
027.                      
028.                if (name == 'Destroy') {
029.                    record = operation.records[0];
030.                    verb = 'Destroyed';
031.                } else {
032.                    verb = name + 'd';
033.                }
034.                Ext.example.msg(name, Ext.String.format("{0} user: {1}", verb, record.getId()));
035.                  
036.            }
037.        }
038.    });
039.      
040.    var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
041.        listeners: {
042.            cancelEdit: function(rowEditing, context) {
043.                // Canceling editing of a locally added, unsaved record: remove it
044.                if (context.record.phantom) {
045.                    store.remove(context.record);
046.                }
047.            }
048.        }
049.    });
050.      
051.    var grid = Ext.create('Ext.grid.Panel', {
052.        renderTo: document.body,
053.        plugins: [rowEditing],
054.        width: 400,
055.        height: 300,
056.        frame: true,
057.        title: 'Users',
058.        store: store,
059.        iconCls: 'icon-user',
060.        columns: [{
061.            text: 'ID',
062.            width: 40,
063.            sortable: true,
064.            dataIndex: 'id'
065.        }, {
066.            text: 'Email',
067.            flex: 1,
068.            sortable: true,
069.            dataIndex: 'email',
070.            field: {
071.                xtype: 'textfield'
072.            }
073.        }, {
074.            header: 'First',
075.            width: 80,
076.            sortable: true,
077.            dataIndex: 'first',
078.            field: {
079.                xtype: 'textfield'
080.            }
081.        }, {
082.            text: 'Last',
083.            width: 80,
084.            sortable: true,
085.            dataIndex: 'last',
086.            field: {
087.                xtype: 'textfield'
088.            }
089.        }],
090.        dockedItems: [{
091.            xtype: 'toolbar',
092.            items: [{
093.                text: 'Add',
094.                iconCls: 'icon-add',
095.                handler: function(){
096.                    // empty record
097.                    store.insert(0, new Person());
098.                    rowEditing.startEdit(0, 0);
099.                }
100.            }, '-', {
101.                itemId: 'delete',
102.                text: 'Delete',
103.                iconCls: 'icon-delete',
104.                disabled: true,
105.                handler: function(){
106.                    var selection = grid.getView().getSelectionModel().getSelection()[0];
107.                    if (selection) {
108.                        store.remove(selection);
109.                    }
110.                }
111.            }]
112.        }]
113.    });
114.    grid.getSelectionModel().on('selectionchange', function(selModel, selections){
115.        grid.down('#delete').setDisabled(selections.length === 0);

很简单,使用api的方式,包括有增删查改,在前台的操作都会被extjs记录下来,再执行sync的时候就可以自动根据状态请求相应的url了。

下面是使用中遇到的一些小问题总结。
1、删除多行数据
例子里使用的是var selection = grid.getView().getSelectionModel().getSelection()[0];注意是加了个[0]的,所以要删除多行,直接取消这个[0],然后执行store即可,前提是你的表格没有限制只能选取一行,默认情况下,cellmodel的mode值为SINGLE,使用checkboxmodel就可以显示checkbox的同时实现多选了。

2、增删查改的同时进行传参
这个一开始同事懒得研究就直接在url里拼上去了,我觉得这样不妥,就查了下相关文章,最终得到两种实现方法
方法一:仅在查询时可用,设置store的autoload为false,手动载入store.load({//to do something});,这样使用查询是可以但是修改删除或者更新时就不好用了。于是有了方法二;
方法二:添加事件监听,在store里面设置linstener,监听beforeload时执行方法,设置Param,如:

1.listeners: {
2.    beforeload: function(proxy, response, operation){
3.         
4.    }
5.}

3、后台动态构造表头不能设置renderer
由于业务特殊性,我们在后台构造json对象包装extjs grid所需的fields、columns,也正因此,不能在后台设置renderer等调用js函数的属性,我的解决方式是,后台添加固定标识,数据到前台后遍历添加所需renderer函数或者特殊编辑器等

后台交互
与后台的交互在一开始还是纠结了半天,没看清楚extjs的实现,原来使用这种方式的请求除了扩展参数以外,表格数据都是通过流交互的。这个在后台是不能直接使用request.getParamter(“xxx”);获取的,因为是使用流,所以需要通过get请求的流来读取数据,又因为是文本数据,所以直接request.getReader().readerLine();获取到的就是json格式的字符串了,接下来就需要自己根据需要进行转换了,个人还是使用json.simple,当然了,具体情况具体对待,如果你的数据有其他的比如文件上传之类的,就需要先获取inputstream再解析了。

就总结这么多了,有任何问题,欢迎留言交流

Extjs 4.2 Grid增删改及后台交互(Java)的更多相关文章

  1. 后台增删改查的实现——java基础、jsp、servlet、数据库

    1.前台和后台的关系: 后台是由工作人员操作的,通过后台系统对数据库实行增删改查等操作,通过前台系统访问数据库,将数据库中的信息通过前台显示. 2.功能实现: (1)显示全部商品信息: home.js ...

  2. spring mvc hibernate spring 整合的增删改查+后台校验+bootstrap

    整合之前先知道大概的思路,首先要知道每个框架的重点要点. 1.首先我们从数据库开始 --创建数据库 create database gs --创建表 create table food ( id ,) ...

  3. JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案(三):两个Viewmodel搞定增删改查

    前言:之前博主分享过knockoutJS和BootstrapTable的一些基础用法,都是写基础应用,根本谈不上封装,仅仅是避免了html控件的取值和赋值,远远没有将MVVM的精妙展现出来.最近项目打 ...

  4. BootstrapTable与KnockoutJS相结合实现增删改查功能

    http://www.jb51.net/article/83910.htm KnockoutJS是一个JavaScript实现的MVVM框架.通过本文给大家介绍BootstrapTable与Knock ...

  5. Java实现mongodb原生增删改查语句

    Java实现mongodb原生增删改查语句 2018-03-16 自动化测试时,需校验数据库数据,为了快速自动化,在代码中用原生增删改查语句操作mongodb 结构 代码 0 pom.xml < ...

  6. 权限管理系统之LayUI实现页面增删改查和弹出层交互

    由于对LayUI框架不太熟悉,昨天抽空看了下LayUI的文档,今天在网上找了使用LayUI进行增删改查相关内容,自己照葫芦画了个瓢,画瓢部分不是很难,主要是下午遇到了一个弹出层的问题耗时比较久. 同一 ...

  7. FineUI大版本升级,外置ExtJS库、去AXD化、表格合计行、表格可编辑单元格的增删改、顶部菜单框架

    这是一篇很长的文章,在开始正文之前,请允许我代表目前排名前 20 中唯一的 .Net 开源软件 FineUI 拉下选票: 投票地址: https://code.csdn.net/2013OSSurve ...

  8. asp.net下利用MVC模式实现Extjs表格增删改查

    在网上看到有很多人写extjs下的表格控件的增删改查,但是大多数都是直接从后台读取数据,很少有跟数据库进行交互的模式. 今天就来写一个这样的例子.欢迎大家交流指正. 首先简单介绍一下MVC模式,MVC ...

  9. [译]聊聊C#中的泛型的使用(新手勿入) Seaching TreeVIew WPF 可编辑树Ztree的使用(包括对后台数据库的增删改查) 字段和属性的区别 C# 遍历Dictionary并修改其中的Value 学习笔记——异步 程序员常说的「哈希表」是个什么鬼?

    [译]聊聊C#中的泛型的使用(新手勿入)   写在前面 今天忙里偷闲在浏览外文的时候看到一篇讲C#中泛型的使用的文章,因此加上本人的理解以及四级没过的英语水平斗胆给大伙进行了翻译,当然在翻译的过程中发 ...

随机推荐

  1. offset client scroll

    offsetHeight offsetWidth返回为元素在屏幕上显示大小,不包括外边距 clientHeight clientWidht 和上面两个类似,不同的是,这两个不包括外边距高度. < ...

  2. 视频1-14待JSP课程看完再练习

    视频1-14待JSP课程看完再练习 http://www.imooc.com/video/5555

  3. 说一说vector<bool>

    vector<T>标准库模版类应该是绝大多数c++程序员使用频率比较高的一个类了.不过vector<bool>也许就不那么被程序员所了解.关于vector<bool> ...

  4. SharePoint 2016 Beta 2 安装体验

    博客地址:http://blog.csdn.net/FoxDave 最近忙碌了一段时间,2016正式版快要发布了,想尽快熟悉熟悉.2016不再提供免费版Foundation的支持,只有Server版本 ...

  5. shell多行注释

    :<<BLOCK ....被注释的多行内容 BLOCK :<< 'BLOCK ....被注释的多行内容 BLOCK'

  6. JDBC中的PreparedStatement

    PreparedStatement类从Statement中继承来. 可以将SQL语句传给数据库做编译处理,即在执行的SQL语句中包含一个或多个IN参数,可以设置IN参数值多次执行SQL语句,不必重新给 ...

  7. CSS第一天总结

    CSS是层叠样式表,其作用在我看来就是统一一个或多个元素或者ID.class等的属性,CSS可以定义的属性非常多,一个好看的网页离不开CSS的修饰. CSS简而言之就是三个部分:选择符.属性.属性值. ...

  8. Mac下同时安装多个版本的JDK & Mac 可设置环境变量的位置、查看和添加PATH环境变量

    http://ningandjiao.iteye.com/blog/2045955 http://elf8848.iteye.com/blog/1582137

  9. MySQL 数据库实现远程连接

    1,刚开始我使用的是Navicat for MySQL工具连接远程的mysql的数据库. 报错了.报错信息是 Error 1130: Host '192.168.1.80' is not allowe ...

  10. PCL安装使用

    一. 下载安装 http://pointclouds.org/downloads/windows.html 1. QT安装在默认路径下(否则后续会出现问题),添加环境变量QTDIR(c:\Qt\4.8 ...