ExtJS5 +Spring MVC CRUD
来源:互联网 发布:淘宝卖假货怎么投诉 编辑:程序博客网 时间:2024/05/16 23:54
I began to write one sample application via ExtJS5 +SpringMVC+CRUD.
Compared to ExtJS4, big difference in ExtJS5 is MVVC. MVC is very traditional design pattern.
But MVVC is quite new to me so that I was starting from MVC javascript design.
My example is just to CRUD “Contact” table.
First Task is EXTJS5 (MVC) + SpringMVC +CRUD.
(1) Server Side
Below is the screenshot for server side. You can download them in the following links.
(2) Client Side
Below is the screenshot for client side.
According to ExtJS4 MVC, we define Contact model. Please specify the field name or type. If not, the data cannot be converted to JSON format correctly. If you have validations, you also can put them here.
Ext.define('BrazilJS.model.Contact', { extend: 'Ext.data.Model', fields: [ {name:'id', type:'int'}, {name:'name', type:'string'}, {name:'phone', type:'string'}, {name:'email', type:'string'} ]});
Then define two views : One is for grid list; Another one is for form edit.
Moreover, store is something like to define how to communicate with Java Backend. Basically, we want to use JSON format to get/post data. In this part, we need to write down API url. Also, you need to implement read and write function. Since we want to transfer data as JSON format, we need to enable encode as “true” in write function.
Ext.define('BrazilJS.store.Contacts', { extend: 'Ext.data.Store', model: 'BrazilJS.model.Contact', autoLoad: true, pageSize: 35, proxy: { type: 'ajax', actionMethods: { create: 'POST', read: 'GET', update: 'POST', destroy: 'POST' }, api: { read : 'contact/view.action', create : 'contact/create.action', update: 'contact/update.action', destroy: 'contact/delete.action' }, reader: { type: 'json', rootProperty: 'items', successProperty: 'success' }, writer: { type: 'json', writeAllFields: true, encode: true, rootProperty: 'items' }, listeners: { exception: function(proxy, response, operation){ Ext.MessageBox.show({ title: 'REMOTE EXCEPTION', msg: operation.getError(), icon: Ext.MessageBox.ERROR, buttons: Ext.Msg.OK }); } } }});
Code Link
Now, let’s modify it to MVVC pattern in later passages
Related Links:
MVC Code Sample
- ExtJS5 +Spring MVC CRUD
- spring-mvc的CRUD
- ExtJs5+Spring.Net+MVC项目搭建笔记(4)--配置Spring
- ExtJs5+Spring.Net+MVC项目搭建笔记(5)--连接数据库
- Spring MVC + Hibernate + Maven: Crud操作示例
- Spring MVC + Hibernate + Maven: Crud操作示例
- Spring MVC--6.RESTful SpringMVC CRUD
- Spring MVC--7.REST风格 CRUD
- Spring MVC + Hibernate + Maven: Crud操作示例
- spring mvc rest风格的CRUD
- REST风格编写Spring MVC的CRUD
- NO.2 Spring MVC CRUD起步
- ExtJs5+Spring.Net+MVC项目搭建笔记--整体框架构建(1)
- ExtJs5+Spring.Net+MVC项目搭建笔记--前台ExtJS搭建(2)
- ExtJs5+Spring.Net+MVC项目搭建笔记--程序之间相互添加引用(3)
- Spring MVC 3 Controller for MyBatis CRUD operation
- Spring MVC 4 RESTFul Web Services CRUD Example+RestTemplate
- 整合 freemarker +spring security + spring MVC + spring DATA jpa 前端jtable 简单的crud
- maven学习系列6----聚合与继承
- nginx的高级数据结构
- spark集群配置
- HDUOJ-1015 Safecracker(深搜)
- 【杭电oj】2795 - Billboard(线段树)
- ExtJS5 +Spring MVC CRUD
- 最简单的UIScrollView 下拉刷新思路
- 【每周一文】A Primer On Neural Network Models for NLP
- JSP内置对象
- Ubuntu创建启动快捷方式
- LeetCode #347. Top K Frequent Elements
- 禁用ViewPager边界滑动效果
- java基础
- Swift基础05