extjs 渲染之前的方法_extjs初探

最近要做一个后台管理系统，方便操作数据库，对比了前端一些渲染框架，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