[solved]error in reasoning: scope / this question

[Spirit]

myTool.info = function(){

return {
priceGrid : function () {
// ..
},

renderPriceGrid : function() {
// ..
x=this; // i need the scope of myTool.info later
var gridHead = grid.getView().getHeaderPanel(true);
var headtoolbar = new Ext.Toolbar(gridHead, [

{ text:'Zeiten bearbeiten'
, cls: 'x-btn-text-icon'
, icon: iconPath + 'date.png'
, handler: function(btn, e) {
x.showDialog(btn,e); // <- this works because i put the "right" this in x
// ???.showDialog(btn,e);

}
}
]);
},

showDialog : function(btnDlg,e){
// ..
}
}
};



Ok, here my easy question:
From within the toolbar i d like to call showDialog but i cant get it to work without my helper var x.
I tried a lot to access it the right way but i think i miss someting.
What do i have to put in ??? to access showDialog directly without having to use x as helper.

I read about this and scope but i think i need help here, just to understand what i m doing wrong.

Thx.

[Animal]

If you want private variables in a singleton:



var mySingleton = function() {
var foo; // Private data accessible in all returned functions
return {
myFunc: function() {
foo = "bar";
}
}
}();

[Animal]

And you need to specify scope as well as handler, if you want to execute the handler in a given scope.

[Animal]

http://extjs.com/deploy/ext/docs/output/Ext.Toolbar.html#add

Will lead you to

http://extjs.com/deploy/ext/docs/output/Ext.Toolbar.Button.html

Which will offer

http://extjs.com/deploy/ext/docs/output/Ext.Toolbar.Button.html#config-scope

[Spirit]

After i changed showDialog to be a private member of the singelton i was able to reach it by giving the handler the scope myTool.info

But i realized that the whole construct is wrong, cause i never wanted to do a singelton so i will have to read again... :-/

Thx animal!

[Spirit]

Ok, now i m totally confused.

There are diffrent notations for the same ?

Singelton:


var mySingleton = function() {
var foo; // Private data accessible in all returned functions
return {
myFunc: function() {
foo = "bar";
}
}
}();

Class


var myClass = function() {
var foo; // Private data accessible in all returned functions
myFunc : function() {
foo = "bar";
}
};


the same as class ?


var myClass2 = function() {
var foo; // Private data accessible in all returned functions
myFunc = function() {
foo = "bar";
}
};


~o)~o)~o)
Are the last 2 the same ?

I thought i sorted it out and understood it weeks ago,...
Maybe tomorrow i see clearer i read too much....

[Animal]

To make a class (which should start with uppercase)



MyClass = function() {
// do the setup
};

MyClass.prototype = function() {
var privateVar = "foo"; // Only accessible to methods defined inside this scope

function privateFunc(v) { // Only accessible to methods defined inside this scope
return 'The value is "' + v + '"';
}

return { // Return the value which will be assigned to the prototype
getPrivateData: function() {
return privateFunc(privateVar);
}
}
}();

var foo = new MyClass();
alert(foo.getPrivateData()); // The only way you can access that "privateVar" variable.


See how the prototype is set to the RESULTS of an immediate call to an anonymous function? So the functions in the returned object will be able to see those private members, but they are totally invisble to anyone else.

[Spirit]

ok, i read your hints,
the thread : What is that "scope" all about?
and http://phrogz.net/JS/Classes/OOPinJS.html
and a lot more.
I thought i understand it, but still i cant get it to work:



myTool.Info = function(){

// ..
this.grid = new Ext.ux.AutoGrid('preisinfos', {
ds: this.store,
selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
enableColLock:false,
loadMask: true,
clicksToEdit :1
});


this.renderPriceGrid = function() {
// render grid
this.grid.render();

x=this;
var gridHead = this.grid.getView().getHeaderPanel(true);
var headtoolbar = new Ext.Toolbar(gridHead, [

// Add a row
{ cls: 'x-btn-text-icon'
, icon: iconPath + 'add.png'
, scope: myTool.Info
, handler: function(btn, e) {
// ..
// this.grid.stopEditing(); <-- this.grid has no properties
// grid.stopEditing(); <-- grid not defined
x.grid.stopEditing(); <-- will work

// ..
}
}
// ..
]);
}
};

I dont know what i m missing ?
My Class is myTool.Info and i m passing the scope: myTool.Info to the button handler, right ?
Why cant i access the public var grid ?
Animal: If possible a little workin example would be great, i read a lot and didnt get the point. :">
THX

[Spirit]

Ok, i changed:


scope: myTool.Info


to:


scope: this


and it worked. Hmmm i thought i tried this more than once and now it works ?!?
Well i m happy :D

Thx animal!

[evant]

Is the class a singleton?

You need to set the scope to "this", not the name of the class.

Edit:

Too late, glad you figured it out :)