最近要做一个后台管理系统,方便操作数据库,对比了前端一些渲染框架,bootstrap,easyUI,extJs,各有优缺点把,最终还是选择了extJs,这门门槛较高的框架。
easyUI基于jquery,bootstrap不同终端的兼容性做的很好啊,而extjs全是控件交互,我作为一个平时写javah后台程序的人来说,上手很容易,清晰的MVC模式,面向组件编程。需要什么页面什么样的交互效果查文档就可以了。但有时前端知识有些匮乏导致关键词都不知道乍搜。所以一开始入门我还是先从一个demo开始的。
这个demo是一个比较规范的后台管理系统了,作为开发对它扩展也很方便,代码路径结构都很清晰。 地址放在文末。
ExtJs让后端开发省了前端渲染的步骤,不用考虑什么html\css了,每个组件就像一个javaBean,要用什么属性往里面加就可以,或者用Ext.apply复制属性即可,页面渲染都丢给ext帮你完成了,所以很多人说它就像一个富win界面,界面很丑陋。 但我觉得既然是后台管理界面丑点也无所谓了,至少开发效率提升了,一个后端开发就可以搞定整个后台管理系统啦。
于是乎我上手扩展了很多栏将自己的表数据都管理进了页面中。后端接口开发完毕打算将接口嵌入到各个store中,用于第一次获取数据。很完美,但是demo没有提供和服务端通信的代码,也就是保存的时候,数据操作要持久化到数据库的那段。显然我们要做的事情就是给这个demo加上提交form的代码。
接下来了解一下extjs提交表单的四种方式:
1、AJAX方式
/**
* 新增
* @param data
*/
function addRecord(data) {
Ext.Ajax.request({
url: '/user/add',
method: 'post',
jsonData: data,
success: function (response, options) {
},
failure: function () {
}
});
}
如果是这种方式,后台参数接收使用spring注解@requestBody ,以json对象格式传输数据
2、指定html表单提交
/**
* 第二种Ajax提交方式
* 这种方式将为ext的ajax指定一个html表单
* 使用这种方式,不需要将待传递的参数进行封装
*
* @return
*/
function save_user_html() {
Ext.Ajax.request( {
url : '/user/add',
method : 'post',
form : 'userForm', // 指定表单
success : function(response, options) {
},
failure : function() {
}
});
}
3、指定extjs自身的表单对象提交,如demo中弹窗的表单保存的时候
var form = formPanel.getForm();
form.submit( {
waitTitle : '请稍后...',
waitMsg : '正在保存用户信息,请稍后...',
url : '/user/add',
method : 'post',
success : function(form, action) {
},
failure : function(form, action) {
}
});
4、将html的表单转化为ext的表单进行异步提交
new Ext.form.BasicForm('userForm').submit( {
waitTitle : '请稍后...',
waitMsg : '正在保存用户信息,请稍后...',
url : '/user/add',
method : 'post',
success : function(form, action) {
},
failure : function(form, action) {
}
});
查文档看到这样一段话: (文档地址见文末)表单操作
Basic类委托给Ext.form.action.Action的实例控制表单加载和提交。 查看不同的Action对于每一个功能的特殊细节实现,和doAction文档,详细说明了规定在每个action调用中的配置项。
默认的提交Action是Ext.form.action.Submit,使用Ajax请求把表单的值提交到配置的URL。 为了使标准浏览器提交Ext表单,使用standardSubmit配置选项。
需要注意的是demo给的并不是 Ext.form.Panel 而是 Ext.grid.Panel
故不能用文档那种方法获取到表单对象,即 var form = this.up('form').getForm(); 这个form对象并非Basic.Form。
更加直接的方式是采用第一种ajax方式提交,添加的那块代码见附件。
总结来看,EXTJS真实用起来对后端开发比较友好,省去了样式和渲染。但不好的一点是,,EXTJS的数据绑定有点强,管理后台开发过程中遇到一些坑爹的问题,例如我添加一个页签取名products,结果遇到的是把s去掉就可以了。。不深究了,遇到的问题在网上也找不到很好的解决方案,所以用EXTJS做后台管理还是慎重。。
EXTJS DEMO地址 System
添加服务端接口的github地址 prs1022/iExtJs5