arguments, classes, json usage in javascript and extjs

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.