Classes and Objects
You
can define a new class in Ext JS 4 using the Ext.define
method. You pass in the class name and
the object where you define the attributes and behavior of the class as
arguments to the Ext.define method.
Ext.define("Mobile",{});
If
you have worked with Ext JS 3 or the earlier versions, you will notice that the
Ext.define method incorporates the functionalities of using Ext.reg,
Ext.ns, and Ext.extend methods.
You
can create an object of the Mobile class using Ext.create method as
shown here.
Ext.create("Mobile ");
In
traditional OO languages the new
keyword is used to create objects. You
can use new to
create objects in Ext JS 4 also.
var
mobile1 = new Mobile ();
The
Ext.create("classname") method dynamically loads all the JavaScript files that the
classname is dependent on before creating an instance, whereas this is not
possible when you use the new keyword.
Constructor
Constructor is the first function that’s called when an object is
created. You can define constructors in our classes using the special property constructor. The constructor property is wired to a function that gets
invoked when an object is created using Ext.create.
Ext.define("Mobile ",{
constructor : function(){
alert("Mobile created");
}
});
The second argument of the Ext.define method is an object that has
a constructor property. On creating an object of class Mobile the constructor gets
invoked and you’ll see Mobile created alert message.
You can define properties of the class and initialize them in
constructors.
Property
Let’s define our Mobile class with two properties title and price. These two properties will be initialized in
our constructors.
Ext.define("Mobile ",{
title : "sony xoeria neo v",
price : 17500,
constructor : function(title,price){
this.title = title;
this.price = price;
}
});
The two properties are initialized using the this keyword, which makes them visible to the objects of the class.You
can instantiate the Mobile class
and initialize it as shown below.
var sony = Ext.create("Mobile
","xperiaz",400000);
alert(sony.title);
alert(sony.price);
You can access title and price properties using the object
reference. The above code snippet alerts xperiaz and 400000.
A class may have a number of attributes. It becomes tedious to
define and initialize them one after the other using the constructor. It’ll be
better if we can define the attributes with default values and initialize only
the required ones.
Config
Ext JS 4 provides a config section for every class where you can
list the attributes of the class with default values. The object can be created
by initializing the attributes in which you are interested.
Ext.define("Mobile",{
config : {
title : "",
price : -1,
manufacturers :[]
},
constructor : function(cfg){
this.initConfig(cfg);
}
});
In the code snippet above, we’ve defined a Mobile class with title, price, and authors listed in the config section. The config section is initialized in the constructor by
calling the initConfig method. The initConfig method
that is present in Ext.Base class initializes the configuration object. You
can create an object of the Mobile class as shown below.
var sony = Ext.create("Mobile",{
title : "xperiay", manufacturers: ["sony1","sony2"]
});
We’ve created the Mobile object by initializing the
title and manufacturers attributes. As mentioned earlier, it’s not mandatory
to initialize these attributes while creating the instance. The variables
declared in the config section have the getter/setter methods
generated automatically. In the above example where sony is a reference to the Mobile
object,you can access the properties as shown below.
alert(sony.getTitle());
sony.setPrice(1200000);
alert(sony.getManufacturers()[0]);
In OO languages the getter and setter methods are usually known as
accessor methods. They are used to access a variabl.If you have a variable called
age, the accessor methods for it will be getAge() and setAge(age). The getAge method will return the value of age and the setAge
method will modify the value of the age.
You can override the getter/setter methods if you want to take
more control of the class. For example, say you want the price of the Mobile to
have a minimum price of 5000. You can perform this validation in the overridden
setPrice method
Validating the Mobile Price
Ext.define("Mobile", {
config: {
title: "",
price: 5000,
manufacturers: []
},
constructor: function (cfg) {
this.initConfig(cfg);
},
setPrice: function (priceVal) {
if (priceVal < 5000)
alert("Invalid value for price " + priceVal);
else
this.price = priceVal;
}
});
var sony = Ext.create("Mobile",{
title : "xperiaaaaaaaa", authors : ["sony3","sony4"]
});
sony.setPrice(3000);
alert(sony.getPrice());
sony.setPrice(30000);
alert(sony.getPrice());
the setPrice method has been overridden with the validation check.
The output of the code will be
Invalid value of price 3000
5000
30000
The config generates an apply method for every attribute
automatically as well. The apply method is called internally by the setter
method. you can override the applyPrice method
to implement the validation rule
Overriding the applyPrice Method
Ext.define("Mobile", {
config: {
title: "",
price: 5000,
manufacturers: []
},
constructor: function (cfg) {
this.initConfig(cfg);
},
applyPrice: function (priceVal) {
if (priceVal < 5000)
console.log("Invalid value for price " + priceVal);
else
this.price = priceVal;
return this.price;
}
});
Methods
You can define custom methods in classes as shown below.
Ext.define("Mobile",{
config : {
title : "",
price: 0
},
constructor : function(cfg){
this.initConfig(cfg);
},
run: function(){
alert("running " + this.getTitle());
}
});
The Mobile class has a run function that can be accessed using the
object reference.
var sony = Ext.create("Mobile",{
title : "xperia", price:12000.00
});
sony.run(); //alerts running xperia
Ext JS 4 provides support for inheritance.
Inheritance
We have an extend
keyword that can be used to
inherit a class in Ext JS 4. Let’s create an Employee class
and a Manager class that inherits the Employee class.
Ext.define("Employee",{
config : {
employeeid : "",
name : "",
salary : 0
},
constructor : function(cfg){
this.initConfig(cfg);
},
work : function(){
alert(this.getName() + " is working");
}
});
Ext.define("Manager",{
extend : "Employee",
config : {
level : 1
}
});
The Manager class inherits the Employee class using the extend
keyword. The configuration properties and the work function in the Employee
class are available to the Manager class.
We can create a Manager object and invoke the work function as
shown below.
var mgr = Ext.create("Manager",{
employeeid:"1529", name: "mani kumar", level:
4
});
mgr.work(); //alerts mani kumar is working
We can override the Employee’s work function in Manager’s class.
Ext.define("Manager",{
extend : "Employee",
work : function(){
alert(this.getName() + " is in a meeting");
}
});
We can call the base class work function using this.callParent()
Ext.define("Manager",{
extend : "Employee",
work : function(){
this.callParent();
alert(this.getName() + " is in a meeting");
}
});
The arguments passed to the Manager’s work function can be
supplied to the Employee’s work function by using the arguments keyword in JavaScript as shown below.
this.callParent(arguments);
You can extend a class and override the constructor as shown
below. You can invoke the base class
constructor using this.callParent method.
Ext.define("Manager",{
extend : "Employee",
constructor : function(cfg){
this.callParent(arguments);
}
});
You can override the constructor of the base class whenever you
inherit generic classes like Employee, Manager,etc. However, you have to be
careful when you inherit UI classes. The constructor of the UI component
classes have a set of operations like initializing events, plugins, etc.
Inheriting a UI component class and overriding the constructor is not a
recommended practice. The UI component classes provide a method called
initComponent(), which is used to initialize the component. This initComponent
method is usually invoked from the constructor. The general practice is to
override the initComponent method in the derived class. Say you want to create
a custom Button, then you can
do that as shown below.
Ext.define("MyButton",{
extend : "Ext.button.Button",
initComponent : function(){
//Your code goes here
}
});
Multiple inheritance is not supported in Ext JS 4. We have mixins
for multiple inheritance similar to interfaces in Java and C#.
Mixins
Mixins help you to mix the behavior of different classes into your
class. Your class can have the functionalities of any number of classes mixed
together. It’s somewhat similar to interfaces in Java where a class can
implement any number of interfaces.
Let’s create two classes, Aquatic and Terrestrial, with swim and
walk functions, respectively.
Ext.define("Aquatic",{
swim : function(){
alert("Swimming");
}
});
Ext.define("Terrestrial",{
walk : function(){
alert("Walking");
}
});
We’ll create a class Reptile that can walk as well as swim. The
Reptile class is created by mixing Aquatic and Terrestrial together.
Ext.define("Reptile",{
mixins : ["Aquatic","Terrestrial"]
});
A Reptile instance can invoke the walk and swim functions.
var reptile = Ext.create("Reptile");
reptile.swim();
reptile.walk();
We have discussed the basic OO concepts in Ext JS 4. Let’s learn
few other features in the class system in Ext JS 4.
Alias
You can define an alias name for the classes. The alias name is
mainly used when you create custom components.
You can use the alias property in the definition
of the class as shown below.
Ext.define("Mobile.SmartPhone.Sony.Xperia", {
alias : "Mobile",
});
Ext.create("Mobile");
No comments:
Post a Comment