Ext开发随笔

    今天在开发一个项目时，前端用的是EXT框架，在开发过程中碰到一个问题：missing } in XML expression。因为本人是用firefox浏览器的插件FireBug做为调试，所就碰上这事。如果不用firefox可能永远碰到着。发现问题咱们就来解决问题。
    使用firedebug跟踪了一下返回的数据, 发现responseText中被加上了<pre></pre>标签，但是在IE中没有<pre>标签，问题就出这里。
    浏览一下源代码，发现Ext.form.Action.Submit提交请求是用Ext.Ajax组件进行数据传输的. Ext.form.Action.Submit部分源代码如下所示:

引用

   1. ... 
   2.    // private 
   3.    run : function(){ 
   4.        var o = this.options; 
   5.        var method = this.getMethod(); 
   6.        var isGet = method == 'GET'; 
   7.        if(o.clientValidation === false || this.form.isValid()){ 
   8.            Ext.Ajax.request(Ext.apply(this.createCallback(o), { 
   9.                form:this.form.el.dom, 
  10.                url:this.getUrl(isGet), 
  11.                method: method, 
  12.                headers: o.headers, 
  13.                params:!isGet ? this.getParams() : null, 
  14.                isUpload: this.form.fileUpload 
  15.            })); 
  16.        }else if (o.clientValidation !== false){ // client validation failed 
  17.            this.failureType = Ext.form.Action.CLIENT_INVALID; 
  18.            this.form.afterAction(this, false); 
  19.        } 
  20.    }, 
  21.  
  22.    // private 
  23.    success : function(response){ 
  24.     //问题源 
  25.        var result = this.processResponse(response); 
  26.        if(result === true || result.success){ 
  27.            this.form.afterAction(this, true); 
  28.            return; 
  29.        } 
  30.        if(result.errors){ 
  31.            this.form.markInvalid(result.errors); 
  32.            this.failureType = Ext.form.Action.SERVER_INVALID; 
  33.        } 
  34.        this.form.afterAction(this, false); 
  35.    }, 
  36.     
  37.    processResponse : function(response){ 
  38.        this.response = response; 
  39.        if(!response.responseText){ 
  40.            return true; 
  41.        } 
  42.        this.result = this.handleResponse(response); 
  43.        return this.result; 
  44.    } 
  45.    ... 

    因为在processResponse函数处理数据时出现异常,所以就出现了上面碰到的问题.那么怎么解决它呢,重写processResponse方法就OK了.在你所使用的JS中加入如下一段代码就OK了.

引用

   1.     Ext.override(Ext.form.Action.Submit,{ 
   2.     // private 
   3.     processResponse : function(response){ 
   4.         this.response = response; 
   5.         //增加下面几句代码就OK啦 
   6.         //////////////////////// 
   7.         var data = response.responseText; 
   8.         if(data.indexOf('<pre>') != -1) { 
   9.           response.responseText = data.substring(5, data.length-6); 
  10.           this.response = Ext.util.JSON.decode(response.responseText); 
  11.         }     
  12.         ///////////////////////////      
  13.         if(!response.responseText){ 
  14.             return true; 
  15.         } 
  16.         this.result = this.handleResponse(response); 
  17.         return this.result; 
  18.     } 
  19. });