PDA

View Full Version : Scope undefined for handler how do I fix it?



geewhizbang
17 Aug 2009, 10:05 AM
My code at bottom fails on clicking either the submit or cancel buttons. The handler is never executed, fails on line below instead in the extJS code.


if(this.handler){
//this.el.removeClass('x-btn-over');
this.handler.call(this.scope || this, this, e);
}


This issue happened after I moved my buttons to a toolbar or perhaps when I used a window to pop up the editor. There was no problem with scope before I did this.

The documentation very helpfully defines scope as, well, scope.

scope (http://extjs.com/deploy/dev/docs/source/Action.html#cfg-Ext.Action-scope) : Object (http://extjs.com/deploy/dev/docs/source/Action.html#cfg-Ext.Action-scope)
The scope in which the (http://extjs.com/deploy/dev/docs/source/Action.html#cfg-Ext.Action-scope)handler (http://extjs.com/deploy/dev/docs/output/Ext.Action.html#Ext.Action-handler) function will execute. (http://extjs.com/deploy/dev/docs/source/Action.html#cfg-Ext.Action-scope)



KnowledgeBase.Forums.Forum.Thread.PostEdit.Editor = new Ext.Window
(
{
title: 'Write New Post',
layout: 'border',
x: 100,
y: 100,
frame: true,
width: 900,
height: 500,
items:
[
{
xtype: 'panel',
layout: 'fit',
region: 'center',
tbar:
[
{
xtype: 'tbtext',
text: 'Post Title'
},{
xtype: 'textfield',
labelWidth: 35,
id: 'tbPostTitle',
width: 600
},{
xtype: 'button',
text: 'Save Post',
style: 'margin:0 0 4px 5px',
handler: 'SavePost'
},{
xtype: 'button',
text: 'Cancel',
style: 'margin:0 0 4px 5px',
handler: 'CancelPost'
}
],
items:
[
{
xtype: 'htmleditor',
region: 'center',
enableColors: true,
enableAlignments: true,
id: 'htmlPostEditor'
}
]
}
]
}
);

function CancelPost()
{
KnowledgeBase.Forums.BreadCrumb.back();
}

function SavePost()
{
//code here
}

tryanDLS
17 Aug 2009, 10:30 AM
Have you read the tutorial stuff regarding scope? http://extjs.com/learn/Tutorials

Animal
17 Aug 2009, 11:07 AM
I've been going round adding "the this reference" to everywhere I see that.

The addListener has that. As does Button's handler.

avsomeren
17 Aug 2009, 12:43 PM
Buttons have their own scope.

Perhaps use :



KnowledgeBase.Forums.Forum.Thread.PostEdit.Editor = new Ext.Window ({
this.SavePost = function()
{
//code here
}
.
.
.
},{
xtype: 'button',
text: 'Save Post',
style: 'margin:0 0 4px 5px',
handler : function() {
this.SavePost();
}, this)
}
.
.
.
);

geewhizbang
17 Aug 2009, 12:53 PM
I read about scope, and that helped, but i suddenly realized the magnitude of my error:

I should have written:


handler: function () { CancelPost(); }


instead of:


handler: 'CancelPost'


I actually do know better than this.

Animal
17 Aug 2009, 1:00 PM
or



handler: CancelPost