1. #1
    Sencha Premium Member
    Join Date
    Jun 2007
    Posts
    59
    Vote Rating
    0
    ftftft is on a distinguished road

      0  

    Default [2.0b1/rc1][SOLVED] timeout at BasicForm never used

    [2.0b1/rc1][SOLVED] timeout at BasicForm never used


    I guess it is a bug at Ext code. Regardless what value I set to timeout, it is always 30 seconds.

    BasicForm.js: (action='submit', options.timeout=40)
    Code:
        
    doAction : function(action, options){
            if(typeof action == 'string'){
                action = new Ext.form.Action.ACTION_TYPES[action](this, options);
            }
    Action.js: (o.timeout = 40. but was never passed to Ext.Ajax.request).
    Code:
        run : function(){
            var o = this.options;
            var method = this.getMethod();
            var isPost = method == 'POST';
            if(o.clientValidation === false || this.form.isValid()){
                Ext.Ajax.request(Ext.apply(this.createCallback(), {
                    form:this.form.el.dom,
                    url:this.getUrl(!isPost),
                    method: method,
                    params:isPost ? this.getParams() : null,
                    isUpload: this.form.fileUpload
                }));
    
            }else if (o.clientValidation !== false){ // client validation failed
                this.failureType = Ext.form.Action.CLIENT_INVALID;
                this.form.afterAction(this, false);
            }
    so, when go to ext-base.js, callback.timeout is always 30000, set by default.
    Code:
            handleReadyState:function(o, callback)
            {
                var oConn = this;
    
                if (callback && callback.timeout) {
                    this.timeout[o.tId] = window.setTimeout(function() {
                        oConn.abort(o, callback, true);
                    }, callback.timeout);
                }

  2. #2
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,527
    Vote Rating
    379
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    Hmmm,

    what I read in the source:

    PHP Code:
        // private
        
    createCallback : function(){
            return {
                
    successthis.success,
                
    failurethis.failure,
                
    scopethis,
                
    timeout: (this.form.timeout*1000),
                
    uploadthis.form.fileUpload this.success undefined
            
    };
        } 
    and
    PHP Code:
       // private
        
    run : function(){
            var 
    this.options;
            var 
    method this.getMethod();
            var 
    isPost method == 'POST';
            if(
    o.clientValidation === false || this.form.isValid()){
                
    Ext.Ajax.request(Ext.apply(this.createCallback(), {
                    
    form:this.form.el.dom,
                    
    url:this.getUrl(!isPost),
                    
    methodmethod,
                    
    params:isPost this.getParams() : null,
                    
    isUploadthis.form.fileUpload
                
    }));

            }else if (
    o.clientValidation !== false){ // client validation failed
                
    this.failureType Ext.form.Action.CLIENT_INVALID;
                
    this.form.afterAction(thisfalse);
            }
        }, 
    This is source from svn rev. 1344.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  3. #3
    Sencha Premium Member
    Join Date
    Jun 2007
    Posts
    59
    Vote Rating
    0
    ftftft is on a distinguished road

      0  

    Default


    Well. Let me go through code at SVN 1350.

    Ext.data.Connection. Eventually, timeout is set to here.

    Code:
    Ext.extend(Ext.data.Connection, Ext.util.Observable, {
       timeout : 30000,
       request : function(o){
                var cb = {
                    success: this.handleResponse,
                    failure: this.handleFailure,
                    scope: this,
                    argument: {options: o},
                    timeout : this.timeout --> That would be 30000, regardless what timeout value to be set in the form.  
                };

  4. #4
    Sencha Premium Member
    Join Date
    Jun 2007
    Posts
    59
    Vote Rating
    0
    ftftft is on a distinguished road

      0  

    Default


    Even this code has some problem. If I call,

    this.formPanel.getForm().submit({timeout: ....}). the "timeout" value here would never be used.

    Code:
        // private
        createCallback : function(){
            return {
                success: this.success,
                failure: this.failure,
                scope: this,
                timeout: (this.form.timeout*1000),
                upload: this.form.fileUpload ? this.success : undefined
            };
        }

  5. #5
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,527
    Vote Rating
    379
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    Here you pass timeout in submit call config object. What if you assign a timeout at the FormPanel construction time as config option, still ignored?

    Docs say it's config option of BasicForm.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  6. #6
    Sencha Premium Member
    Join Date
    Jun 2007
    Posts
    59
    Vote Rating
    0
    ftftft is on a distinguished road

      0  

    Default


    My code is like below. Both "timeout" parameter are ignored.

    Code:
       this.filterForm = new Ext.FormPanel({
            url:'....',
            timeout: 400,
       } 
       this.filterForm.getForm().submit(
            { waitMsg: 'Retrieving transactions...',
              success: this.onLoadSuccess,
              failure: displayFailureMessage,
              timeout: 400,
              scope: this
            }
        );
    more comments. timeout at Ext.data.Connection is a Constants at 30000(Aka. 30 seconds).

    At, Ext.data.Connection. var cb = { time: this.timeout} -> 30000

    Goto Ext.lib.Ajax

    Code:
            handleReadyState:function(o, callback)
            {
                var oConn = this;
    
                if (callback && callback.timeout) { --> callback.timeout is cb.timeout at Ext.data.Connection
                    put alert(callback.timeout) for a quick check.
                    this.timeout[o.tId] = window.setTimeout(function() {
                        oConn.abort(o, callback, true);
                    }, callback.timeout);
                }

  7. #7
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,527
    Vote Rating
    379
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    Yes, confirmed; I'm adding it to the bug list. My showcase:

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link rel="stylesheet" type="text/css" href="../extjs-2.0/resources/css/ext-all.css">
        <script type="text/javascript" src="../extjs-2.0/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="../extjs-2.0/ext-all-debug.js"></script>
        <script type="text/javascript" src="form2.js"></script>
        <!-- A Localization Script File comes here -->
        <script type="text/javascript">
            Ext.onReady(myForm.app.init, myForm.app);
        </script>
        <title>Ext 2.0 Form Test</title>
    </head>
    <body>
    <div id="my-form" style="position:relative;top:30px;left:40px;width:600px"></div>
    </body>
    </html>
    javascript:
    PHP Code:
     /*2007-10-29 06:36:55* 2007-10-26 23:14:492007-10-26 23:14:41**
      * Ext 2.0 Form Test
      * by Jozef Sakalos, aka Saki
      */

    // reference local blank image
    Ext.BLANK_IMAGE_URL '../extjs/resources/images/default/s.gif';

    // some data used in the examples
    Ext.namespace('Ext.exampledata');

    // create namespace
    Ext.namespace('myForm');

    // create application
    myForm.app = function() {
        
    // public space
        
    return {
            
    // public methods
            
    init: function() {
                
    Ext.QuickTips.init();
                
    Ext.form.Field.prototype.MsgTarget 'under';
                var 
    form = new Ext.FormPanel({
                     
    bodyStyle'padding:0px'
                    
    ,width500
                    
    ,height375
                    
    ,frametrue
                    
    ,collapsibletrue
                    
    ,style:'margin:24px'
                    
    ,renderTodocument.body
                    
    ,title'Ext 2.0 Form Test'
                    
    ,url:'/echo.php'
                    
    ,method:'post'
                    
    ,timeout:5
                    
    ,items: [{
                         
    xtype'textfield'
                        
    ,hideMode:'offsets'
                        
    ,fieldLabel'First text field'
                        
    ,name'firsttext'
                        
    ,anchor:'90%'
                    
    },{
                         
    xtype:'fieldset'
                        
    ,title:'Fieldset Title'
                        
    ,header:false
                        
    ,items:[{
                            
    xtype:'textfield'
                            
    ,fieldLabel:'Some text field'
                            
    ,anchor:'95%'
                        
    }]
                    }]
                    ,
    buttons:[{
                         
    text:'Save'
                        
    ,handler: function() {
                            
    form.getForm().timeout 5;
                            
    form.getForm().submit({
                                 
    success: function(formaction) {
                                    
    alert('success');
                                }
                                ,
    failure: function(formaction) {
                                    
    alert('failure');
                                }
                                ,
    timeout:5
                            
    });
                        }
                    }]
                });
            }
        };
    }(); 
    // end of app

    // end of file 
    and PHP responder:

    PHP Code:
    <?
    sleep
    (8);
    echo 
    "<pre>" print_r($_POST1) . "</pre>";
    ?>
    I'm always getting success alert unless I set sleep above to more than 30 seconds.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  8. #8
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,266
    Vote Rating
    121
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    Please try out the following override and let me know if it works. I have tested it with Saki's example:

    Code:
    Ext.data.Connection.override({
        request : function(o){
            if(this.fireEvent("beforerequest", this, o) !== false){
                var p = o.params;
    
                if(typeof p == "function"){
                    p = p.call(o.scope||window, o);
                }
                if(typeof p == "object"){
                    p = Ext.urlEncode(p);
                }
                if(this.extraParams){
                    var extras = Ext.urlEncode(this.extraParams);
                    p = p ? (p + '&' + extras) : extras;
                }
    
                var url = o.url || this.url;
                if(typeof url == 'function'){
                    url = url.call(o.scope||window, o);
                }
    
                if(o.form){
                    var form = Ext.getDom(o.form);
                    url = url || form.action;
    
                    var enctype = form.getAttribute("enctype");
                    if(o.isUpload || (enctype && enctype.toLowerCase() == 'multipart/form-data')){
                        return this.doFormUpload(o, p, url);
                    }
                    var f = Ext.lib.Ajax.serializeForm(form);
                    p = p ? (p + '&' + f) : f;
                }
    
                var hs = o.headers;
                if(this.defaultHeaders){
                    hs = Ext.apply(hs || {}, this.defaultHeaders);
                    if(!o.headers){
                        o.headers = hs;
                    }
                }
    
                var cb = {
                    success: this.handleResponse,
                    failure: this.handleFailure,
                    scope: this,
                    argument: {options: o},
                    timeout : o.timeout || this.timeout
                };
    
                var method = o.method||this.method||(p ? "POST" : "GET");
    
                if(method == 'GET' && (this.disableCaching && o.disableCaching !== false) || o.disableCaching === true){
                    url += (url.indexOf('?') != -1 ? '&' : '?') + '_dc=' + (new Date().getTime());
                }
    
                if(typeof o.autoAbort == 'boolean'){ // options gets top priority
                    if(o.autoAbort){
                        this.abort();
                    }
                }else if(this.autoAbort !== false){
                    this.abort();
                }
                if((method == 'GET' && p) || o.xmlData || o.jsonData){
                    url += (url.indexOf('?') != -1 ? '&' : '?') + p;
                    p = '';
                }
                this.transId = Ext.lib.Ajax.request(method, url, cb, p, o);
                return this.transId;
            }else{
                Ext.callback(o.callback, o.scope, [o, null, null]);
                return null;
            }
        }		
    });
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  9. #9
    Sencha Premium Member
    Join Date
    Jun 2007
    Posts
    59
    Vote Rating
    0
    ftftft is on a distinguished road

      0  

    Default


    Hi, Aaron,

    Your fix worked, when I set timeout at the form config parameter. But the timeout set at form.submit( { timeout: ... }) has not been used.

    Thanks,

  10. #10
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,266
    Vote Rating
    121
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    Try this for the timeout config option in the submit and load methods:
    Code:
    Ext.form.Action.prototype.createCallback = function(opts){
    	var opts = opts || {};	
        return {
            success: this.success,
            failure: this.failure,
            scope: this,
            timeout: (opts.timeout*1000) || (this.form.timeout*1000),
            upload: this.form.fileUpload ? this.success : undefined
        };
    };
    
    Ext.form.Action.Submit.override({
        run : function(){
            var o = this.options;
            var method = this.getMethod();
            var isPost = method == 'POST';
            if(o.clientValidation === false || this.form.isValid()){
                Ext.Ajax.request(Ext.apply(this.createCallback(o), {
                    form:this.form.el.dom,
                    url:this.getUrl(!isPost),
                    method: method,
                    params:isPost ? this.getParams() : null,
                    isUpload: this.form.fileUpload
                }));
    
            }else if (o.clientValidation !== false){ // client validation failed
                this.failureType = Ext.form.Action.CLIENT_INVALID;
                this.form.afterAction(this, false);
            }
        }	
    });
    
    Ext.form.Action.Load.override({
        run : function(){
            Ext.Ajax.request(Ext.apply(
                    this.createCallback(this.options), {
                        method:this.getMethod(),
                        url:this.getUrl(false),
                        params:this.getParams()
            }));
        }
    });
    Aaron Conran
    @aconran
    Sencha Architect Development Team