The Arguments Keyword
The arguments keyword is an implicit parameter available to functions in JavaScript. It’s an array that is used to access
the function’s parameter list, which basically says you don’t really have to formally declare arguments for a function,
but you can still access the values passed, using the ‘arguments’.
Say you have a method to calculate the sum of all the values passed to a method.
function sum() {
var sum = 0;
for (var i = 0; i < arguments.length; i++) {
sum += arguments[i];
}
alert(sum);
}
sum(1, 2, 3); //Alerts 6
sum(10, 20, 30, 40, 50); //Alerts 150
Use of Arguments in Ext JS 4
Ext JS 4 API has many functions defined to accept a number of arguments, but you do not always invoke them by
passing all the arguments. For example, here is a code snippet where I handle the itemclick event for a data grid.
Both lines are valid; the difference lies in the number of arguments you pass to the function.
Ext.getCmp("mygrid").on("itemclick",function(src,record){...});
Ext.getCmp("mygrid").on("itemclick",function(src,record,index){...});
You can call a base class method from the derived class method in Ext JS 4 by writing this.callParent(arguments);
Notice the use of the arguments keyword.
Functions
In JavaScript functions are first class citizens, like classes in OO languages.
You can define a function in the traditional way like this.
function eat(){ alert("Eating"); }
You can invoke the eat() function even before you define it, as shown below.
eat();//alerts Eating
function eat(){alert ("Eating"); }
Though JavaScript is an interpreted language, function definitions are run first, irrespective of where they are placed in the code. So you can invoke a function even before you define it like the eat() function call.
You can also assign a function to a variable like this:
var eat = function(){ alert ("Eating"); }
Though eat is defined to be a variable, you can still invoke it like a normal function call: eat(). But what you have to watch out for is that you cannot invoke the eat() function before defining the variable. The following code will throw an error if the function is declared as an expression.
eat();
//Uncaught TypeError: Property 'eat' of object [object DOMWindow] is not a function
var eat = function(){alert ("Eating"); }
So what’s the use of assigning a function to a variable? You can pass the eat variable as an argument to other function
Functions as arguments
function work(arg){
arg();
}
work(eat);
work(function(){alert ("Coding");});
As shown above, the work() function accepts an argument which can be a reference to another function.
We can then invoke the passed function using the arg() call. A function that accepts another function as an argument is commonly referred as a Higher-order function.
Higher-Order Functions in Ext JS 4
In Ext JS 4 you have plenty of functions that accept other functions as arguments. For example, the function that’s called after the DOM is loaded is:
Ext.onReady(function(){
...
});
Ext.onReady() is a higher order function.
Classes in JavaScript
JavaScript is a functional language. It doesn’t have classes like those in OO languages. You can treat functions as classes, and create objects, by using the new keyword. You can create function objects that you can manipulate and pass around like objects. This feature can be used to write traditional OO code.
Say you want to create a class with variables and methods in JavaScript. Instantiate it just as you would in C# or Java. Let’s create a class Person with name and age attributes and an eat() method.
Person class
function Person(theName,theAge){
this.name = theName; //public variable
this.age = theAge;
this.eat = function(){
alert(this.name + " is eating");
}
}
If you now want to create an object of class Person and invoke its eat() method, you can use the new keyword just as in other OO languages.
var p1 = new Person("ManiKumar",23);
p1.eat(); //alerts ManiKumar is eating
alert(p1.age); // alerts 23
The new keyword creates an object from the Person function and returns a reference to the object. Notice the use of this keyword in the Person class. The this keyword binds a variable to the object that is created. You can treat this keyword like a public variable.
Use of Classes in Ext JS 4
The UI components in Ext JS 4 are available as classes. So if you want to create a button, you actually create an object of Button class like this.
var button = new Ext.button.Button();
Now you know how a Button class would be defined in Ext JS 4. It’s just a function.
JSON
One of the most popular and widely-used features of JavaScript is the JavaScript Object Notation (JSON). It’s used to represent a JavaScript object. It’s also used as a data format like XML. Here’s a JSON object.
var myDetails = {
name:"mani kumar",
address : "hyderabad",
test : function(){
alert("hello " + this.name);
}
};
The myDetails variable is a JSON object with some properties. The formats is an array and test() is a function.
Use of JSON in Ext JS 4
The properties of the UI components that you create in Ext JS 4 are specified in JSON
format. Here is some code that creates a button in Ext JS 4.
var btn = new Ext.button.Button({
text : "Click",
id : "mybutton",
handler : function(){
console.log("Button clicked");
}
});
As you can infer from the code, the button’s attributes like text, handler, id are specified as properties of a JSON object.
