ExtJS5 整合Spring4之一

程序员文章站 2022-04-07 14:44:30

...

原型组成及环境搭建

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>