Search code examples
functionextjsreferenceerror

Extjs ReferenceError (function in plugged file is not defined)


i plug some utility files to the main application. But on function Flang() from there is not referenced: web sniffer in console issues: ReferenceError: FLang is not defined

index.html:

<html> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
...
<script type="text/javascript" src="application.js" ></script>

<script type="text/javascript" src="js/menu.js" ></script>  
<script type="text/javascript" src="js/lang.js" ></script> 

<script type="text/javascript" src="js/directories/assortment.js" ></script>

<title id="page-title">Main Application v.2.0</title>
    ...

lang.js:

...
function FLang(str){ 

 if (ComboBoxLang.getValue()=='en')
   return str;
 else if (ComboBoxLang.getValue()=='ru')
   return FappLangRu(str);
 else  
   return str;  
 };

In the network inspector i see this file lang.js loaded, yet still this function is not defined: at application.js (last line in this snippet):

application.js:

 Ext.Loader.setPath('Ext.ux', '../app/extjs/examples/ux');
 Ext.require([
   'Ext.ux.grid.FiltersFeature',
    'Ext.ux.grid.*', 
]);



Ext.ns("appMain");

...


appMain.NorthRegion = Ext.create('Ext.panel.Panel', {       
region: 'north',
xtype: 'panel',
id: 'NorthRegion',              
border:true,
title: FLang('Subsystems'),  
 appMain.WestRegion= Ext.create('Ext.panel.Panel', {        
    region: 'west',
    xtype: 'panel',
    collapsible: true,
    floatable: true,
    width: 100,
    split: true,                
    border:true,
    title: FLang('Subsystem control'),

 }); // end of $WestRegion
 appMain.CenterRegion = Ext.create('Ext.tab.Panel', {       
region: 'center',
xtype: 'tabpanel',      
border: true,
title: FLang('Main window'),
autoScroll:true,
 }); 

Does it somehow relate to namespacing, since prior to that without namespacing there was no reference problem?

Edits

After defining all the regions and their contents, we start app this way:

Ext.onReady(function() {

var MainView = Ext.create('Ext.Viewport', {
    layout:'border',
    border:true,
    items:[ 
        appMain.NorthRegion,
        appMain.WestRegion,
        appMain.CenterRegion   
    ], // end of viewport items      
}); 



}); // end of Ext.onReady() function

Solution

  • Try to change order of including lang.js and application.js in your index.html. However, even if it does work there is still one problem. You must not create components before the document is ready, hence, all Ext.create calls must be wrapped in onReady.

    See Ext/Touch Component Life Cycle to learn more.