Namespace confusion

[msuresh]

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]

onReady has two parameters: function and scope.

You want:

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

[msuresh]

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]

Think about it: what is the difference between ui.utp.common.showNfn() and ui.utp.common.showNfn.

[msuresh]

"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]

No, ui.utp.common.showNfn is the function and ui.utp.common.showNfn() is the result of calling the function.

[msuresh]

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]

Where did you define ui.utp.common.showNfn?

[msuresh]

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]

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...