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. });