I came across to Ext.namespace()
in the project that I am working on.
I looked in Sencha's website and the explanation was not very helpful.
This is what they are saying:
Creates namespaces to be used for scoping variables and classes so that they are not global. Specifying the last node of a namespace implicitly creates all other nodes.
Ext.namespace('Company', 'Company.data');
They also mention that Ext.ns('Company.data')
is preferable.
I apologize if this question seems simple or dumb, but I really want to completely understand this concept. Thanks in advance
This is what is not very clear to me:
Ext.namespace('Company', 'Company.data')
at the top of my JS page, does this mean that it carries all the other function name and variables (like a global scope)?Ext.namespace('Company', 'Company.data')
?Ext.ns('Company.data')
does not have 'Company' like in Ext.namespace
? Specifying the last node of a namespace implicitly creates all other nodes
?The Ext namespace (global object) encapsulates all classes, singletons, and utility methods provided by Sencha's libraries.
Ext JS is a popular JavaScript framework which provides rich UI for building web applications with cross-browser functionality. Ext JS is basically used for creating desktop applications. It supports all the modern browsers such as IE6+, FF, Chrome, Safari 6+, Opera 12+, etc.
ExtJS stands for Extended JavaScript. It is a JavaScript framework and a product of Sencha, based on YUI (Yahoo User Interface). It is basically a desktop application development platform with modern UI.
As per the syntax of Ext. define, the first parameter 'Student' is class name. The second parameter is a JavaScript object which contains name and getName(), and the third parameter (optional) is callback function which will be called after 'Student' class is created. So this way you can create custom class in Ext JS.
First off, this is what Ext.ns('Company.data')
is roughly equivalent too:
if (!Company) var Company = {};
if (!Company.Data) Company.Data = {};
Basically, it is just a shortcut for defining deeply nested structures
of objects. It is useful if your project structures this way; I've seen
projects with a Java backend that duplicate the
com.company.app.data.package
package names in JavaScript, for which
Ext.ns
is a nice shortcut.
Addressing your questions point by point:
- If I have
Ext.namespace('Company', 'Company.data')
at the top of my JS page, does this mean that it carries all the other function name and variables (like a global scope)?
No. You have to add to Company.Data
, like Company.Data.newVal = 5;
.
- What exactly 'Company' and 'Company.data' stand for in
Ext.namespace('Company', 'Company.data')
?
They are names, chosen by you, following your projects convention.
- Why new convention
Ext.ns('Company.data')
does not have 'Company' like inExt.namespace
?
Because 'Company' is implied. That is, Ext.ns('Company',
'Company.data')
is like:
if (!Company) var Company = {};
if (!Company) var Company = {};
if (!Company.Data) Company.Data = {};
This makes it easier to see why the first 'Company' is redundant.
What does this mean
Specifying the last node of a namespace implicitly creates all other nodes
?When exactly this idea should be used?
I answered these two above.
Ext.namespace is really only useful if you want to define your own classes without using Ext.define.
The example below requires the namespaces to be created ahead of time:
Company.data.Form = Ext.extend(...); //this is the old way of defining classes
The standard way for creating ExtJS classes is:
Ext.define('Comany.data.Form', {...});
This method creates the namespaces for you automatically.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With