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

---

Hmmm,

what I read in the source:

PHP 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
        };
    } 


---

and

PHP Code:

---

   // private
    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);
        }
    }, 


---

This is source from svn rev. 1344.

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

---

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

---

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.

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

---

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'
                ,width: 500
                ,height: 375
                ,frame: true
                ,collapsible: true
                ,style:'margin:24px'
                ,renderTo: document.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(form, action) {
                                alert('success');
                            }
                            ,failure: function(form, action) {
                                alert('failure');
                            }
                            ,timeout:5
                        });
                    }
                }]
            });
        }
    };
}(); // end of app

// end of file 


---

and PHP responder:

PHP Code:

---

<?
sleep(8);
echo "<pre>" . print_r($_POST, 1) . "</pre>";
?>

---

I'm always getting success alert unless I set sleep above to more than 30 seconds.

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

---

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,

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

---