PDA

View Full Version : Namespace confusion



msuresh
3 Nov 2010, 1:03 AM
Hi,
I am designing an application where I am storing common functions like help, feedback window and others in namespace "common".



//Common.js
Ext.namespace('ui.utp');
Ext.QuickTips.init();

ui.utp.common = function(){
//Call Help Window
//Call Feedback Window
}

//home.js
Ext.namespace('ui.utp');
ui.utp.home = function(){
//Calling ViewPort and other layouts

}

Ext.onReady(ui.utp.common,ui.utp.home);


However I am getting an error like this: l.fireFn.apply is not a function

Don't know whether this is the right way to call the common functions. Please advice.

Regards,
SURESH KUMAR M R

Condor
3 Nov 2010, 1:13 AM
onReady has two parameters: function and scope.

You want:

Ext.onReady(ui.utp.common, ui.utp);
Ext.onReady(ui.utp.home, ui.utp);

msuresh
3 Nov 2010, 1:22 AM
Thanks condor.

The below piece of code is giving error "Object doesn't support this propery or method." in IE 8.

I tried to call "ui.utp.common.showNfn" in Firebug, however it is returning null. How can I call the functions in "ui.utp.common"



listeners: {
afterlayout: {
fn: ui.utp.common.showNfn(),
single: true
}
}

Condor
3 Nov 2010, 1:25 AM
Think about it: what is the difference between ui.utp.common.showNfn() and ui.utp.common.showNfn.

msuresh
3 Nov 2010, 2:11 AM
"ui.utp.common.showNfn" is like a variable and "ui.utp.common.showNfn()" is a function. I am declaring these things as public, still not able to access.

Condor
3 Nov 2010, 2:24 AM
No, ui.utp.common.showNfn is the function and ui.utp.common.showNfn() is the result of calling the function.

msuresh
3 Nov 2010, 2:34 AM
but why I am unable to access showNfn()?

in firebug it returns
>>> ui.utp.common.showNfn
TypeError: ui.utp.common is undefined { message="ui.utp.common is undefined", more...}
>>> ui.utp.common.showNfn()
TypeError: ui.utp.common is undefined { message="ui.utp.common is undefined", more...}



ui.utp.home = function(){
...
...
toolChestPanel,
mainPanel
],
listeners: {
afterlayout: {
fn: ui.utp.common.showNfn,
single: true
}
},
renderTo: Ext.getBody()
});
};
Ext.onReady(ui.utp.common, ui.utp);
Ext.onReady(ui.utp.home, ui.utp);

Condor
3 Nov 2010, 3:07 AM
Where did you define ui.utp.common.showNfn?

msuresh
3 Nov 2010, 3:45 AM
I have created showNfn function in namespace "ui.utp.common".



Ext.namespace('ui','ui.utp','ui.utp.common');
Ext.QuickTips.init();
ui.utp.common = function(){
...
...
// On clicking the help link on the header the help window will be shown
Ext.get("help").on('click', function(){
helpWindow.show();
});

// public space
return {
test:"check this",
// public methods
/*
* This function displays the notification message near the header.
* Also there is an option to close this notification. The layout
* adjusts automatically.
*/
var showNfn = function(){
Ext.Ajax.request({
url: '/data/json/msg.json',
success: function(response,opts){
var obj = Ext.decode(response.responseText);
if(obj.succes){
Ext.getCmp("mainHeader").setHeight(100);
var nfnContent='<div id="mainNfn"><div style="height:20px;"><div style="float:left;margin:3px 0 0 24px;" id="nfnTxt">'+obj.msg+'</div><div class="cancelNfn"></div></div></div>';
Ext.getCmp("notification").update(nfnContent);
Ext.getCmp("mainLayout").doLayout(true,true);
Ext.select('.cancelNfn').on('click', function(){
//Hide Notification and reset the height
Ext.getCmp("notification").hide();
Ext.getCmp("mainHeader").setHeight(74);
Ext.getCmp("mainLayout").doLayout(true,true);
})
Ext.get('release').on('click', function(){
//Call Release notes Window
alert("Release notes... TBD")
})
}
}
});
} //End of showNfn();
}
}();



I checked firebug DOM viewer, there it is showing "undefined undefined", if I double click on that, then it is showing the details of the namespace we have defined. I thought i have defined wrongly and pasted the example from one of the ExtJS namespace tutorial example, the behavior is the same.

After going thru tutorials, I am totally confused between the terms package, class, object, namespace in ExtJS. Anyway i am not going to give up till I understand this completely.

msuresh
3 Nov 2010, 6:18 AM
now i have defined inside "init:", still not working...

Please let us know how to define and call a public function...



Ext.namespace('ui','ui.utp','ui.utp.common');

ui.utp.common = function(){
...
...

// public space
return {
init:function(){// public methods
// On clicking the help link on the header the help window will be shown
Ext.get("help").on('click', function(){
helpWindow.show();
});

/*
* Monitors clicks on text "Version" present on the header
*/
var showVersion = Ext.get ('versionno');
showVersion.on('click', function(){
showInfoWindow.show()
});

function test(){
alert("Happy")
};

}// End of init()
}
}();


ui.utp.common.test() is not working...

nagarajan.bose
3 Nov 2010, 6:20 AM
Even I am facing a similar problem, i am unable to access the public functions defined inside the namespace.

Condor
3 Nov 2010, 6:29 AM
Post #8 isn't even valid javascript!


var obj = (function(){
var private = 1;
return {
public: function(){
return private;
}
};
})();
or

var obj = new (function(){
var private = 1;
this.public = function(){
return private;
};
})();