谭明智的空间

我们一直在努力....

基于ext-core的ajax自动保存功能

标签: extjs extjs-core 自动保存

基于ext-core的ajax自动保存功能摘要:当系统资源紧张的时候,浏览器就会出现卡死的现象,好不容易写的博客还没发却不得不强制杀掉浏览器的进程,面对这种情况就需要加入自动保存功能,下面我就来介绍一下基于ext-core的ajax自动保存功能。

  如果我们有写博客的习惯,我们会发现好多的博客系统都提供了自动保存的功能。这有什么好处呢?还是先看看我们经常出现的问题吧。
  老板在写邮件,突然有事走开了。半小时后回来,继续写邮件,发送的时候直接跳转到登陆页面,邮件没有发送成功。老板暴跳如雷,好不容易洋洋洒洒写的邮件突然没了。然后老板把开发人员××叫到办公室,办公室的气氛一下紧张起来。这就是session失效带来的问题。
  我们不得不牺牲服务器的资源将session的失效时间调长一些,或者字节不过期。但是我们能控制程序,却控制不了浏览器。当系统资源紧张的时候,浏览器就会出现卡死的现象,好不容易写的博客还没发却不得不强制杀掉浏览器的进程,那种心痛的感觉,我也体会过啊。
  面对这种情况怎么办?对了,让系统帮您自动保存草稿,即使我们遇到这样的情况,我们还能恢复到最新编辑的状态。最近,百洋软件研究实验室的博客发布功能也加入了自动保存的功能,下面就开发的重点简要介绍一下。
  1、定时自动保存,我们需要定时器。
  2、自动保存表单不能跳页,不能刷新当前页,我们需要使用AJAX方式实现。
  3、非form提交会出现很多的问题,特别有在线编辑器加入的表单中,经常会遇到编码,违禁字符,中文乱码等问题。所以尽可能使用form提交,以便更好的和struts2结合。
  明确了这些后,我们开始逐步的实现。首先做一个autoSave.js来获取表单的内容,并提交到后台处理。才开始我们沿用百洋软件研究实验室前台使用的AJAX框架mootools,但是mootools使用ajax提交表单的能力太差了(个人感觉,可能一知半解)。不用表单提交,结果真的出现我上面说的一些问题。由于该网站后台采用extjs开发,我对extjs比较熟悉,而且extjs的表单ajax提交功能是非常强大的,于是想通过extjs来解决。由于是网站前台,所以采用extjs的精简版—ext-core。(如果开发网站的时候ext-core发布了的话,该网站也  不会采用mootools,以后将慢慢想ext-core改版)

以下是autoSave.js的代码及注释
//设置定时器,时间间隔为一分钟,执行autoSave方法

下图为新增博文的表单:

现在开始说明一下extjs提交表单的问题。当提交表单时,后台一直没有执行自动保存的方法而是执行的发布的方法,这让我感到非常奇怪。于是我将【发布】和【保存到草稿箱】的submit按钮删掉后,程序才执行自动保存的方法。于是我怀疑,提交表单后程序执行保存表单方法不是调用ext-core中定义的URL路径,而是调用的表单中第一个submit按钮定义的方法,这也许和struts2的表单写法有关系。我然后在【发布】前加上一个定义为自动保存方法的按钮,这次开始执行自动保存方法,这证明我上面的猜测是正确的了,但是具体原因不详。所以这就出现了上面的代码:
提交前让两个按钮失效:

Ext.getDom('btn_publish').disabled=true;
Ext.getDom('btn_draft').disabled=true;
提交后恢复两个按钮:
Ext.getDom('btn_publish').disabled=false;
Ext.getDom('btn_draft').disabled=false;

后台自动保存的方法就不用介绍了,和struts2的保存完全一样。该实现注意的两个重点:
1、建议使用表单提交,避免编码问题和乱码问题。
2、Extjs提交struts2表单会执行第一个submit按钮对应的action,提交时候要将按钮暂时性失效。
 

基于ext-core的ajax自动保存功能就介绍到这里了,这个功能非常重要,如果你想看看具体的效果,赶紧注册一个账号开始使用吧。注册地址:
http://www.po-soft.com/login.po

附件:


    评分: 请先登录再投票,同一篇博客一月只能投票一次!
    无人投票

相关博客:


评论


发表评论

关注此文的人们还关注