Raindan 2016-01-03
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>
-----------------------------------
本例支持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/>
我的调代码的习惯是:
-----------------------------------
本小节的目标是在本地建立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方式引入均可。
需要特别说明的是:
其中 /Users/chen4w/Sites/es 即你的之前放在httpserver主目录下前端代码所在目录,<br>
这个上下文定义要求jetty在它的上下文中引用该目录,从而使得es可在jetty下被访问,避免了跨域问题。
-----------------------------------
用户登录:
分页grid:
文本检索:
日期检索:
支持导航滚动的详细页:
重复性验证:
License
-----------------------------------
本项目包含了Sencha ExtJS GPLv3代码: