`

ExtJS5 整合Spring4之一

阅读更多

 

原型组成及环境搭建

 

ExtJS是优秀的前端RIA组件,ExtJS5采用了MVVM模型,它在MVC的基础上引入ViewModel抽象, 实现了在View和Data之间的双向Bind,程序员不需要再关注界面field与数据的双向更新。 在MVVM模型之下,可以轻松实现对数据的CRUD,前端界面通过OOP机制实现最大程度的组件派生和复用。 对于一致性的操作方式,甚至可以对Controller逻辑大量复用,程序员只需要将关注点放在特殊界面逻辑。

 

 美中不足的是:Sencha官方并没有提供一个可供java使用者快速搭建应用的服务端原型。 本例是从一个实际项目抽取的快速搭建ExtJS+Spring的原型。

本原型包括为前端应用和后端应用,

前端项目:

http://git.oschina.net/chen4w/es

后端项目:

http://git.oschina.net/chen4w/se

功能说明

-----------------------------------

本App是使用Sencha Cmd v5.1.2.52,按照sencha官方教程建立,

  参考文档:https://docs.sencha.com/extjs/5.1/getting_started/getting_started.html

  为了接近实际项目需求,主要引入了以下功能:

  1. 主界面布局及调度模仿了:kitchensink <http://dev.sencha.com/ext/5.1.0/examples/kitchensink/

  2. MVVM的文件目录组织及Simdata前端仿真模仿了:ticket-app <http://dev.sencha.com/ext/5.1.0/examples/ticket-app/index.html>

  3. 按照你国用户的使用习惯,扩展实现了更省地儿的grid filter控件:<http://chen4w.iteye.com/blog/2210313>

  4. 详细页的界面组织,提供了一个公用的支持导航滚动的基础类:<http://chen4w.iteye.com/blog/2197060>

 

快速开始

-----------------------------------

本例支持SimData方式的前端Restful仿真,在此种方式下,Restful交互被前端的代理层接管,不需要后台服务提供Restful实现。

SimData可仿真CRUD界面交互,在后台Restful未实现时,就可以让用户看到最终界面的操作细节。

在沟通的过程中不断改进界面,而后台的Restful实现则可独立开发,不需要参与用户讨论。

将本例代码的master分支下载到本地的http server的主目录下,

打开浏览器并访问:<http://localhost/es/web/>  即可。

 

预备开始

-----------------------------------

如果需要修改前端代码,某些改动是需要借助Sencha Cmd来build的。

关于如何安装Sencha Cmd,请参阅:<http://www.sencha.com/products/sencha-cmd/download/

我的调代码的习惯是:

  •   在终端方式下,进入:  ../es/web 目录下,键入 sencha app watch 命令,让sencha cmd监视代码修改,自动build
  •    默认设置下,extjs会在每个请求的文件加动态时间戳以避免缓存,但这种机制会导致你设置的断点失效,在url中加入参数 cache=true,可避免此问题, 即: <http://localhost/es/web/?cache=true>

 

正式开始

-----------------------------------

本小节的目标是在本地建立ExtJS整合Spring的开发环境。由于服务端是以SpringSide4的QuickStart为蓝本的。

因此预备环境要求同SpringSide4,我采用的环境是:Mac Capitan下:JDK8 + eclipse Luna + Jetty8.1。

另外别忘了jetty for eclipse插件:<https://wiki.eclipse.org/Jetty_WTP_Plugin/Jetty_WTP_Install>

准备好开发环境之后,下载:<http://git.oschina.net/chen4w/se>,通过maven project或existing project方式引入均可。

需要特别说明的是:

  •   es项目的代码请切换到springside分支(其实只有3行代码差异)
  •   Jetty8 Server需要定义如下截图的web上下文(不要采用默认上下文)。

  其中 /Users/chen4w/Sites/es 即你的之前放在httpserver主目录下前端代码所在目录,<br>

  这个上下文定义要求jetty在它的上下文中引用该目录,从而使得es可在jetty下被访问,避免了跨域问题。



 

  •   保存上下文设置,右键*se->Run As->Run on Server*, 当Spring引导启动完成之后,<br> 
  •   浏览器访问:<http://localhost:8080/es/web/>, 会出现登录界面,初始用户名/密码: admin/admin

 

界面截图

-----------------------------------

用户登录:


 

分页grid:



 

文本检索:



 

日期检索:



 

支持导航滚动的详细页:



 

重复性验证:



 

 

License

-----------------------------------

本项目包含了Sencha ExtJS GPLv3代码:

<https://www.sencha.com/legal/gpl/>

 

  • 大小: 14.8 KB
  • 大小: 71.7 KB
  • 大小: 83.6 KB
  • 大小: 82.1 KB
  • 大小: 35 KB
  • 大小: 69.1 KB
  • 大小: 85.4 KB
  • 大小: 289.4 KB
  • 大小: 106.6 KB
分享到:
评论

相关推荐

    ExtJS5 整合Spring4之二

    标题 "ExtJS5 整合Spring4之二" 暗示了这是一个关于将流行的JavaScript框架ExtJS5与Java后端框架Spring4集成的主题。在Web应用开发中,这种集成允许开发者利用ExtJS5的富客户端功能和Spring4的强大后端服务。下面将...

    ExtJS4.1+MVC4+Spring.NET1.3+EF5 整合项目数据库

    ExtJS4.1+MVC4+Spring.NET1.3+EF5 整合项目数据库(pdm、sql及sqlite数据库) 原文地址:http://blog.csdn.net/xz2001/article/details/8723266

    spring+mvc+mybatis+extjs整合

    【标题】"spring+mvc+mybatis+extjs整合"是一个经典的Java Web开发框架组合,广泛应用于企业级应用。这个项目结合了Spring MVC作为控制层,MyBatis作为数据访问层,以及ExtJS作为前端展示层,构建了一个完整的三层...

    Hibernate+Spring+Struts2+ExtJS整合开发实例

    "Hibernate+Spring+Struts2+ExtJS整合开发实例"就是一个典型的Java Web应用程序开发案例,它将四个关键组件结合在一起,以实现高效、模块化的后端和前端功能。 **Hibernate** 是一个流行的Java对象关系映射(ORM)...

    Spring3MVC + MyBatis + ExtJs3整合开发系列

    Spring3MVC、MyBatis和ExtJs3的整合开发旨在创建一个高效的、灵活的Web应用程序。整合的关键在于如何协调这些框架的工作,使得Spring3MVC处理HTTP请求和控制流程,MyBatis负责数据访问和SQL执行,而ExtJs3则作为前端...

    extjs dwr hibernate spring

    extjs dwr hibernate spring 整合的树!

    spring3+ibaits3+struts2.18+Extjs3整合增删查改

    "Spring3+iBatis3+Struts2.18+ExtJS3整合增删查改"是一个典型的Java Web开发组合,用于实现高效的数据管理和用户界面交互。下面我们将深入探讨这个组合中的每个组件及其在整体架构中的作用。 **Spring3**: Spring...

    spring+extjs项目文件

    三、Spring与ExtJS整合 1. RESTful API:Spring MVC可以通过配置轻松实现RESTful接口,供ExtJS前端调用。 2. JSON数据交换:Spring支持JSON序列化与反序列化,与ExtJS的数据模型对接,实现前后端数据交互。 3. ...

    ssh+extjs4整合开发

    在IT行业中,SSH+EXTJS4的整合开发是一种常见的前端与后端技术栈结合,用于构建功能丰富的Web应用程序。SSH代表Spring、Struts和Hibernate,它们分别是Java领域中用于处理不同层面的三个核心框架:Spring提供了依赖...

    spring mvc +Extjs

    本篇文章将深入探讨如何使用Spring MVC 3与ExtJS进行数据交互,特别是通过JSON格式来实现这一过程。 首先,Spring MVC 3引入了对RESTful服务的支持,使得JSON数据交换变得更加容易。JSON(JavaScript Object ...

    Spring3.0+Hibernate4.0+SpringMVC整合ExtJS4

    6. 安全性考虑:可能需要整合Spring Security或其他安全框架,以保护应用程序免受未经授权的访问。 7. 测试:编写单元测试和集成测试,确保每个部分的功能正常,同时优化性能和响应时间。 通过这个整合,开发者...

    ExtJS4.1+MVC3+Spring.NET1.3+EF5 整合项目数据库

    ExtJS4.1+MVC3+Spring.NET1.3+EF5 整合项目用到的数据库 原文地址: http://blog.csdn.net/xz2001/article/details/8716541 注:该数据库是20130411日修改后的。

    Struts2、Spring、Hibernate整合ExtJS,

    通过本文的介绍,我们不仅了解了 Struts2、Spring、Hibernate 和 ExtJS 的基本概念和特点,还详细阐述了如何将这些技术栈整合起来构建一个实际的 Tree 示例。这种方式不仅提高了开发效率,还能更好地满足企业级应用...

    Extjs5.0从入门到实战开发信息管理系统(Extjs基础、Extjs5新特性、Spring、Spring mvc)

    Extjs5.0从入门到实战开发信息管理系统(Extjs基础、Extjs5新特性、Spring、Spring mvc、Mybatis),完整版,提供课件和代码下载! 本教程从Extjs5的开发环境搭建开始,讲解了Extjs5的项目结构(包括核心文件的作用...

    Spring3MVC+MyBatis+ExtJs3整合开发系列之四:角色管理模块

    在本篇博文中,我们将深入探讨“Spring3MVC+MyBatis+ExtJs3整合开发系列之四:角色管理模块”。这个主题涉及到三个关键的技术栈:Spring MVC作为后端MVC框架,MyBatis作为持久层解决方案,以及Ext Js 3作为前端UI库...

    Extjs struts2 spring 图书馆

    【标题】"Extjs struts2 spring 图书馆"是一个基于流行Java技术栈构建的图书馆管理系统,它将前端的富互联网应用(RIA)框架Extjs与后端的MVC框架Struts2和企业级服务管理框架Spring进行了深度融合。这个项目为...

    DWR+extjs+spring+hibernate

    **整合DWR、EXTJS、Spring和Hibernate** 将这四者结合,可以创建出高性能的Web应用。DWR处理客户端与服务器的通信,EXTJS负责用户界面,Spring作为应用的架构基础,提供服务层和数据访问层的支持,而Hibernate则用于...

    Spring+JPA+ExtJs(Grid)

    标题“Spring+JPA+ExtJS(Grid)”涉及的是一个整合了Spring框架、Java Persistence API (JPA) 和ExtJS Grid的项目。这个项目的核心在于利用这些技术构建一个数据展示和管理的前端后端系统。 首先,Spring是企业级...

    Extjs + Spring MVC + hibernate + mysql

    标题 "Extjs + Spring MVC + hibernate + mysql" 涉及的是一个综合性的Web应用程序开发框架,结合了前端UI库、后端MVC框架、ORM工具和关系型数据库。让我们详细了解一下这些技术及其在实际项目中的应用。 1. ExtJS...

    Spring+Struts2+ibatis+Extjs 整合 图书管理系统实例

    在本项目中,我们探讨的是一个基于Java技术栈的图书管理系统实现,具体采用了Spring、Struts2、iBatis和ExtJS这四个核心技术。这个系统旨在提供全面的图书管理功能,包括图书的增删改查、用户管理以及可能的借阅、...

Global site tag (gtag.js) - Google Analytics