Ext scoping issue

[tlownie]

Hi,

I have a simple scoping issue, and if someone could explain what I'm doing wrong in the code fragment below, I'd be eternally grateful.

Basically, I'm passing a tree panel 'tree' to my own TreeToolbar, to set the property 'this.mytree', which is passed to init(), and then 'refreshBefore()'. 'refreshBefore()' makes an ajax call. However, at the callback, 'refreshAfter()', "this.mytree" has lost its value and is undefined.

The code worked fine as a bunch of individual java functions, it's now that I'm trying to encapsulate it via "Ext.extends" that I can't get this setting to persist. I'm assuming there's some simple scoping rule about javascript I'm not following.

Thanks again for your help.


<script type='text/javascript'>

Ext.TreeToolbar = function ( el, tree, config ) {
this.mytree = tree;
Ext.TreeToolbar.superclass.constructor.call ( this, el, config );
this.renderButtons ( this.el );
alert ( this.mytree );
this.init();
};

Ext.extend(Ext.TreeToolbar, Ext.Toolbar, {

renderButtons : function(el){
Ext.TreeToolbar.superclass.render.call(this, el);
this.addButton({
id:'refresh',
cls:"x-btn-icon x-toolbar-refresh",
disabled:false,
handler:this.refreshBefore,
tooltip:tooltip_top,
tooltipType: 'title'
});
},

init : function(){
alert ( "init=" + this.mytree );
this.refreshBefore();
},

refreshAfter : function(options,success,response){
alert ( "refresh after " + this.mytree );
if ( ! this.mytree ) { return; }
this.mytree.el.removeAllListeners();
var treeDom = tree.el.dom;
while ( treeDom.firstChild )
{ treeDom.removeChild ( treeDom.firstChild ); }
var json = eval ( response.responseText );
var root = new Ext.tree.AsyncTreeNode ( { text:json[0].text, draggable:false, id:'source', children:json[0].children } );
this.mytree.setRootNode ( root ); this.mytree.render(); root.expand(); root.expandChildNodes ( false );
},

refreshBefore : function(btn){
alert ( "refresh before " + this.mytree );
Ext.Ajax.request({
url:'ajax_tree.do',
method:'POST',
params: { ajax_key:'RoleRight', todo:'refresh' },
callback:this.refreshAfter
});
}

});

/**
*
*/

var tb;
var test = function()
{
return {
init : function()
{
alert ( "hello, world!" );
var loader = new Ext.tree.TreeLoader ( { baseParams:{}, dataUrl:'ajax_tree.do' } );
var tree = new Ext.tree.TreePanel ( 'tree', { animate:true, enableDD:true, loader: loader, lines: true, selModel: new Ext.tree.DefaultSelectionModel(), containerScroll: true } );
tb = new Ext.TreeToolbar ( 'toolbar', tree );
var rz = new Ext.Resizable ( 'tree', { wrap:true, minHeight:100, pinned:true, handles:'s' } );
return tree;
}
};
}();

Ext.onReady ( test.init, test, true );

</script>

[tlownie]

Ok, I figured it out, I needed to add a 'scope: this.mytree' option to the ajax call.