1. #1
    Sencha Developer
    Join Date
    Mar 2007
    Location
    Germany
    Posts
    482
    Vote Rating
    1
    Wolfgang is on a distinguished road

      0  

    Default [solved]Ext.Direct load data in extended Form fails (scope issue)

    [solved]Ext.Direct load data in extended Form fails (scope issue)


    Hello,

    when loading data into an extend form, i always get
    Code:
    this.form is undefined
    [Break on this error] this.form.afterAction(this, false); 
    ext-all-debug.js (Zeile 65958)
    (Note: this linenumber refers to ext 3.2.0 that has been released today - thank you :-))
    Submit works just fine.

    At that line, it seems that "this" point to the global window object instead to the form.

    Before that happens - arround line 63138-63141 it looks good.
    PHP Code:
        load : function(options){
            var 
    loadAction String.format('{0}load'this.api 'direct' '');
            
    this.doAction(loadActionoptions);
            return 
    this;
        }, 
    loadAction == "directload" and this == the form.

    Maybe this thread is related: http://www.extjs.com/forum/showthread.php?t=86826

    Here the code - am i doing something wrong - is this an ext scope issue?

    PHP Code:
    Ext.ns('Ext.app');
    Ext.app.AddHostForm =  Ext.extend(Ext.form.FormPanel, {
        
    bodyStyle'padding:10px;'
        
    ,autoScroll:true 

        
    ,initComponent: function(){
            var 
    config = {
                
    api: {
                    
    loadrpc.Hosts.get
                    
    ,submitrpc.Hosts.addHost
                
    }
                ,
    defaultType'textfield'
                
    ,items: [{
                    
    fieldLabel'Hostname'
                    
    ,name'hostname'
                    
    ,allowBlank:false
                
    }
                ,{
                    
    fieldLabel'User Name'
                    
    ,name'username'
                    
    ,allowBlank:false
                
    }
                ,{
                    
    fieldLabel'Password'
                    
    ,inputType'password'
                    
    ,name'password'
                    
    ,allowBlank:false
                
    }] // oe items
                
                
    ,buttons:[{
                    
    text:'Load'
                    
    ,scope:this
                    
    ,handler:this.onLoad
                
    }
                ,{
                    
    text:'Submit'
                    
    ,scope:this
                    
    ,handler:this.onSubmit
                
    }] // oe buttons
                
            
    };
            
            
    Ext.apply(thisconfig); 
            
    Ext.apply(this.initialConfigconfig);
            
    Ext.app.AddHostForm.superclass.initComponent.apply(thisarguments);
        } 
    // oe initComponent


        // direct load handler
        
    ,onLoad: function() {  
            
    this.getForm().load({
                
    params: {
                    
    id1
                
    }
                ,
    success: function() {
                    
    console.log('load success');
                }
                ,
    failure: function() {
                    
    console.log('load failure');
                }
            });
        } 
    // eo onLoad
        
        // direct submit handler
        
    ,onSubmit: function() {
            
    this.getForm().submit({
                
    params: {id2}
                ,
    success: function() {
                    
    console.log('submit success');
                }
                ,
    failure: function() {
                    
    console.log('submit failure');
                }
            });
        } 
    //eo onSubmit 

    });
    Ext.reg('appaddhostform'Ext.app.AddHostForm); 
    Any help / hint is very much appreciated - Thank you

  2. #2
    Sencha User steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,657
    Vote Rating
    6
    steffenk has a spectacular aura about steffenk has a spectacular aura about steffenk has a spectacular aura about

      0  

    Default


    I had same problems and got enlightenment here:
    http://www.extjs.com/forum/showthread.php?t=95267
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

  3. #3
    Sencha Developer
    Join Date
    Mar 2007
    Location
    Germany
    Posts
    482
    Vote Rating
    1
    Wolfgang is on a distinguished road

      0  

    Default


    Steffen thank you - but i still need a bit more enlightment, even after reading your thread.
    From Ext Form.js:
    PHP Code:
        // private
        
    createForm : function(){
            var 
    config Ext.applyIf({listeners: {}}, this.initialConfig);
            return new 
    Ext.form.BasicForm(nullconfig);
        }, 
    i see i need to have set initialConfig. But this is what i have done in my code
    PHP Code:
            Ext.apply(thisconfig);
            
    Ext.apply(this.initialConfigconfig);
            
    Ext.app.AddHostForm.superclass.initComponent.apply(thisarguments); 
    also - removing the api definition from initComponent and adding an onRender method does not help:
    PHP Code:
        // does not work neither - independent wether to call superclass before or after Ext.apply
        
    ,onRender: function() {

           
    //Ext.app.AddHostForm.superclass.onRender.apply(this, arguments);
            
    Ext.apply(this.getForm(),{
                
    api: {
                    
    loadrpc.Hosts.get
                    
    ,submitrpc.Hosts.addHost
                
    }
                ,
    paramsAsHashfalse
            
    });
            
    Ext.app.AddHostForm.superclass.onRender.apply(thisarguments);
        } 

  4. #4
    Sencha User steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,657
    Vote Rating
    6
    steffenk has a spectacular aura about steffenk has a spectacular aura about steffenk has a spectacular aura about

      0  

    Default


    the latest is the one i use in my forms. Are you sure you have proper formHandler set? Is there a request?

    here is a working formPanel i use:
    PHP Code:
    Ext.ns('TYPO3.EM');

    TYPO3.EM.TerUpload Ext.extend(Ext.form.FormPanel, {
        
    border:false,
        
    recordDatanull,
        
        
    initComponent:function() {
            
            
            
            
    Ext.apply(this, {
                
    itemId'extUploadForm',
                
    height340,
                
    defaultType'textfield',
                
                
    defaults: {width350},
                
    items: [{
                    
    fieldLabel'Repository Username',
                    
    name'fe_u'
                
    }, {
                    
    fieldLabel'Repository Username',
                    
    inputType'password',
                    
    name'fe_p'
                
    }, {
                    
    fieldLabel'Changelog for upload',
                    
    xtype'textarea',
                    
    height150,
                    
    name'uploadcomment'
                
    }, {
                    
    xtype'radiogroup',
                    
    fieldLabel'New Version',
                    
    itemCls'x-check-group-alt',
                    
    columns1,
                    
    items: [
                        {
    boxLabel'New bugfix version (latest x.x.<strong><span class="typo3-red">x+1</span></strong>)'name'newversion'inputValue'new_dev',checkedtrue},
                        {
    boxLabel'New sub version (latest x.<strong><span class="typo3-red">x+1</span></strong>.0)'name'newversion'inputValue'new_sub'},
                        {
    boxLabel'New main version (latest <strong><span class="typo3-red">x+1</span></strong>.0.0)'name'newversion'inputValue'new_main'}
                    ]
                }, {
                    
    xtype'button',
                    
    text'Upload extension',
                    
    scopethis,
                    
    handler: function() {
                        
    this.form.submit({
                            
    waitMsg 'Sending data...',
                            
    success: function(formaction) {
                                
    TYPO3.Flashmessage.display(1,'TER Upload''Extension was uploaded to TER'5);
                                
    form.reset();
                            },
                            
    failure: function(formaction) {
                                if (
    action.failureType === Ext.form.Action.CONNECT_FAILURE) {
                                    
    TYPO3.Flashmessage.display(3'Error',
                                            
    'Status:'+action.response.status+': '+
                                            
    action.response.statusText5);
                                }
                                if (
    action.failureType === Ext.form.Action.SERVER_INVALID){
                                    
    // server responded with success = false
                                    
    TYPO3.Flashmessage.display(3'Invalid'action.result.errormsg5);
                                }
                            }
                        });
                    }
                }],
                
    listeners: {
                    
                    
    activate: function(panel) {
                        
                        
                    }
                },
                
    scopethis
            
    });
        
            
    TYPO3.EM.TerUpload.superclass.initComponent.apply(thisarguments);
        },

        
    onRender: function() {
            

            
    TYPO3.EM.TerUpload.superclass.onRender.apply(thisarguments);
            
            
    Ext.apply(this.getForm(),{
                
    api: {
                    
    loadTYPO3.EM.ExtDirect.loadUploadExtToTer,
                    
    submitTYPO3.EM.ExtDirect.uploadExtToTer
                
    },
                
    paramsAsHashfalse
                
            
    }); 
            
    this.form.load();
        }
        

    });

    Ext.reg('terupload'TYPO3.EM.TerUpload); 
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

  5. #5
    Sencha Developer
    Join Date
    Mar 2007
    Location
    Germany
    Posts
    482
    Vote Rating
    1
    Wolfgang is on a distinguished road

      0  

    Default


    Thank you very much steffen.

    Well after some hours of debugging i finally got it running.
    Ok first the fix - it looks pretty easy (set either paramsAsHash:true or paramOrder: ['id'])
    PHP Code:
        ,initComponent: function(){
            var 
    config = {
                
    api: {
                    
    loadrpc.Hosts.get
                    
    ,submitrpc.Hosts.addHost
                
    }
                
    //,paramOrder: ['id'] // really important! either this
                
    ,paramsAsHashtrue // or this - otherwise error! this.form. ist not an object... 
    Really simple once you know this.
    But why does it lead to such an error?
    All we do is to define how params are sent during a load event using Ext.direct / "directload"?

    We have some issues to think about:
    a.) Where to put the api:{} and paramOrder/paramsAsHash properties?
    b.) How to use paramOrder/paramsAsHash?
    c.) Is there anything else important?

    About a.)
    This was the issue that steffen found/solved (But this was not the issue i faced)
    "api" and "paramOrder/paramsAsHash" must be set in initComponent or in onRender/afterRender.
    The reason for this is in Ext.FormPanel:
    PHP Code:
        createForm : function(){
            var 
    config Ext.applyIf({listeners: {}}, this.initialConfig);
            return new 
    Ext.form.BasicForm(nullconfig);
        }, 
    About b.)
    "paramOrder" or set "paramsAsHash:true" must be set. This is important!
    The reason for this is that Ext.form.Action.DirectLoad.getParam() would return an empty array.
    If both properties are set, "paramOrder" takes preference.
    Have a look here:
    PHP Code:
        getParams : function() {
            var 
    buf = [], = {};
            var 
    bp this.form.baseParams;
            var 
    this.options.params;
            
    Ext.apply(opbp);
            var 
    paramOrder this.form.paramOrder;
            if(
    paramOrder){
                for(var 
    0len paramOrder.lengthleni++){
                    
    buf.push(o[paramOrder[i]]);
                }
            }else if(
    this.form.paramsAsHash){
                
    buf.push(o);
            }
            return 
    buf;
        }, 
    getParams() also revels the "secret" of paramsAsHash. Basically (as the name implies) it defines how the called loadhandler in the backend gets the params: Either all params in one hash or as seperate params.

    About c.)
    Well, what happens if no param is specified or if both paramsAsHash/paramOrder is not set?
    In this case one get the error i ran into.
    But why?
    The first step to the answer is again in Ext.form.Action.DirectLoad:
    PHP Code:
        run : function(){
            var 
    args this.getParams();
            
    args.push(this.successthis);
            
    this.form.api.load.apply(windowargs);
        }, 
    The first push would be the result of getParams().
    But bc i had not set paramsAsHash/paramOrder, this was an empty array.

    This leads to trouble in Ext.direct.RemotingProvider:
    PHP Code:
        doCall : function(cmargs){
            var 
    data nullhs args[m.len], scope args[m.len+1]; 
    args should be
    Code:
     
    args[param, function, form]
    but was
    Code:
    args[function, form]
    However with m.len == 1
    Code:
     
    hs = args[m.len], scope = args[m.len+1];
    became a mess.

    Summary:
    - When using Ext.direct with a form - you must use either "paramsAsHash:true" or "paramOrder:['myparam']".
    - When extending such a form, you must set those properties, along with "api" either in initComponent or on/afterRender.

    Thanks for reading - I know this is quite a long post but i hope it helps others to get a better understanding.

    Wolfgang

  6. #6
    Ext User
    Join Date
    Nov 2007
    Posts
    21
    Vote Rating
    0
    sjerry is on a distinguished road

      0  

    Question


    Code:
    run : function(){
            var args = this.getParams();
            args.push(this.success, this);
            this.form.api.load.apply(window, args);
        },
    I still get the "this.processResponse is not a function" error, even though everything looks fine. I hope you can clarify the flow of the scope.

    Is "this" in args.push(this.success, this); the scope for "this.success" callback?

    Do ExtDirect functions take a third param for the scope of the callback? For example: Products.getAll('ASC', callback, this)?

    When i do: args.push(this.success.createDelegate(this), this); everything works the way it should be...

    In the code above, the scope (in my case) is "Ext.form.Action.DirectLoad". After the server response is received and the success callback is invoked, the scope in the callback is "window". I think it should be the action scope

  7. #7
    Sencha Developer
    Join Date
    Mar 2007
    Location
    Germany
    Posts
    482
    Vote Rating
    1
    Wolfgang is on a distinguished road

      0  

    Default


    After the server response is received and the success callback is invoked, the scope in the callback is "window". I think it should be the action scope
    This is correct.

    Can you show more code, especially the form?

  8. #8
    Ext User
    Join Date
    Aug 2007
    Posts
    39
    Vote Rating
    0
    perler is on a distinguished road

      0  

    Default


    Quote Originally Posted by sjerry View Post
    Code:
    run : function(){
            var args = this.getParams();
            args.push(this.success, this);
            this.form.api.load.apply(window, args);
        },
    I still get the "this.processResponse is not a function" error, even though everything looks fine. I hope you can clarify the flow of the scope.

    Is "this" in args.push(this.success, this); the scope for "this.success" callback?

    Do ExtDirect functions take a third param for the scope of the callback? For example: Products.getAll('ASC', callback, this)?

    When i do: args.push(this.success.createDelegate(this), this); everything works the way it should be...

    In the code above, the scope (in my case) is "Ext.form.Action.DirectLoad". After the server response is received and the success callback is invoked, the scope in the callback is "window". I think it should be the action scope
    I'm having the same problem with the same error message. The scope is set to window and thus the method cannot be called. Did someone solve this?

  9. #9
    Sencha User
    Join Date
    Mar 2011
    Posts
    1
    Vote Rating
    0
    zwlee is on a distinguished road

      0  

    Default


    Quote Originally Posted by Wolfgang View Post
    This is correct.

    Can you show more code, especially the form?
    hello!
    when i used directload method,
    I have encountered another problem, when the connect is failured, like 404 error,
    the ext-all.js will run into an error: a is undefined!!

    did you ever encountered this situation too??