Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: Namespace confusion

  1. #1
    Touch Premium Member msuresh's Avatar
    Join Date
    Dec 2007
    Location
    Bangalore, India
    Posts
    220

    Question Namespace confusion

    Hi,
    I am designing an application where I am storing common functions like help, feedback window and others in namespace "common".

    Code:
    //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

  2. #2
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    onReady has two parameters: function and scope.

    You want:
    Code:
    Ext.onReady(ui.utp.common, ui.utp);
    Ext.onReady(ui.utp.home, ui.utp);

  3. #3
    Touch Premium Member msuresh's Avatar
    Join Date
    Dec 2007
    Location
    Bangalore, India
    Posts
    220

    Default

    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"

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

  4. #4
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

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

  5. #5
    Touch Premium Member msuresh's Avatar
    Join Date
    Dec 2007
    Location
    Bangalore, India
    Posts
    220

    Default

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

  6. #6
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

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

  7. #7
    Touch Premium Member msuresh's Avatar
    Join Date
    Dec 2007
    Location
    Bangalore, India
    Posts
    220

    Default

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

    Code:
    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);

  8. #8
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

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

  9. #9
    Touch Premium Member msuresh's Avatar
    Join Date
    Dec 2007
    Location
    Bangalore, India
    Posts
    220

    Default

    I have created showNfn function in namespace "ui.utp.common".

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

  10. #10
    Touch Premium Member msuresh's Avatar
    Join Date
    Dec 2007
    Location
    Bangalore, India
    Posts
    220

    Default

    now i have defined inside "init:", still not working...

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

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

Page 1 of 2 12 LastLast

Similar Threads

  1. Confusion about layouts
    By happybrowndog in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 18 Oct 2010, 10:15 AM
  2. Scope confusion...
    By george.antoniadis in forum Ext 2.x: Help & Discussion
    Replies: 5
    Last Post: 12 Nov 2007, 6:40 AM
  3. OO JavaScript confusion
    By SeaSharp in forum Community Discussion
    Replies: 11
    Last Post: 18 Oct 2007, 7:33 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •