Results 1 to 8 of 8

Thread: Scope Within Tool Handler???

  1. #1
    Ext User
    Join Date
    Feb 2008
    Posts
    14

    Default Scope Within Tool Handler???

    Hello,

    I have a function that retrieves database rows via an AJAX call. The function then creates a new panel for each row. Each panel has a 'gear' tool that is supposed to open an edit window with the particular row fields loaded and ready for editing.

    Code:
                // load subjects and create a draggable panel for each
                var subjectGroupPanels=[];
                function loadSubjects() {
                    Ext.Ajax.request({
                        url : '../server/sl.php' , 
                        params : { action : 'loadSubjects', study: <? echo $study_id; ?> },
                        method: 'GET',
                        success: function ( result, request ) {
                            // Delete any existing panels
                            if (subjectGroupPanels[0] != null){
                                for ( var i in subjectGroupPanels ){
                                    if (typeof subjectGroupPanels[i] == 'object'){
                                        subjectGroupPanels[i].destroy();
                                    }
                                }
                            }
                            var subject_groups = eval('(' + result.responseText + ')');
                            for ( var i in subject_groups ){
                                if (typeof subject_groups[i][2] != 'undefined'){
                                    // Add a panel for this subject group
                                    var x = subject_groups[i][1];
                                    subjectGroupPanels[i] = new Ext.Panel({
                                            header: true,
                                            html: 'details',
                                            renderTo: 'subject_list',
                                            collapsible: true,
                                            collapsed: true,
                                            draggable: true,
                                            collapseFirst: false,
                                            tools: [{
                                                id:'gear',
                                                qtip: 'Edit or Delete this subject group',
                                                handler: function(event, toolEl, panel){
                                                    editSubjectGroup(x);  // !!! always passes the value of the LAST x
                                                }
                                            }],
                                            title: subject_groups[i][3] + ' ' + subject_groups[i][2]
                                    });
                                }
                            }
    
                            // Display raw return in history for debugging
                            var addTo = Ext.get('history').dom;
                            addTo.innerHTML = result.responseText + "<br />" + addTo.innerHTML;
                        },
                        failure: function ( result, request) { 
                            Ext.MessageBox.alert('Unable to load subjects.', result.responseText); 
                        } 
                    });
                }
    I can not get my tool handler to correctly pass the database row id to the edit function. If I write:

    Code:
    alert(subject_groups[i][1]); // shows correct value
    
    handler: function(event, toolEl, panel){
    editSubjectGroup(subject_groups[i][1]);  // alert within called function shows passed value as undefined
    If I write:

    Code:
    var id = subject_groups[i][1];
    alert(id); // shows correct value
    
    handler: function(event, toolEl, panel){
    editSubjectGroup(id);  // alert within called function shows passed value as always being the LAST database id.  i.e.  If there are 5 panels coresponding to ids 1,2,3,4,5 - the handlers for all 5 panels will pass '5' as the id.
    I have tried defining the variables outside of this function but that didn't make a difference. Can anyone point me in the right direction? Thank you!!!

  2. #2
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996

    Default

    Code:
    collapseFirst: false,
    scope: this,
    tools: [{ ...
    looks like you're redeclaring x each time though.

  3. #3
    Ext User
    Join Date
    Feb 2008
    Posts
    14

    Default

    I did add 'scope: this,' and declared x earlier in the function so that it's only declared once and it did not seem to make a difference.

    I also tried passing i as the argument to my function. That results in passing a function as a string! It seems that there is some basic principle of javascript that I must be missing...

    Thank you!

  4. #4
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    And if you declared the tools like this?

    Code:
    tools: [{
      id:'gear',
      qtip: 'Edit or Delete this subject group',
      handler: editSubjectGroup.createDelegate(this, [x]);
    }],

  5. #5
    Ext User
    Join Date
    Feb 2008
    Posts
    14

    Default

    Yes! That does it. Thank you!

  6. #6
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996

    Default

    I'm not sure I understand the correction.

    PHP Code:
    var 1;
    var 
    = new Ext.Panel({
        
    tools: [{
            
    scopethis,//p
            
    handler: function(){
                
    1;
            }.
    createDelegate(this, [x])//append x as argument
        
    }]
    }); 
    Is it that this was pointing to the panel. But you (Condor) appended "x" as an argument, which was in the scope of the panel instance (p)? Not sure I get it.

  7. #7
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    The correct example would be:
    Code:
    var x = 1;
    var p = new Ext.Panel({
        tools: [{
            //scope: this, <- not needed, createDelegate already sets the scope
            handler: function(y) { // need fuction WITH argument
                alert(y + 1);
            }.createDelegate(this, [x]); // append x as argument
        }]
    });
    (but don't ask me why your original code doesn't work, because I don't understand that).

  8. #8
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996

    Default

    Ok, I left the scope in there for illustration, I realize that you would not need to do both scope and create delegate.

    But in the example above, if this is p then there is no p.x correct?

    That's why I was thinking it would not work (x is not a property of p). But, instead you appended an argument (x) which was in scope at the time tools was configured, so x was bound as an argument at a point in time that it was in scope?

    Just trying to rationalize...

    I did miss the handler arguments (you appended the argument so may was well use it right?)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •