Home / راهنمای سریع Extjs

راهنمای سریع Extjs

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("Book",{});
 
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 Book class using Ext.create method as shown here.
 
Ext.create("Book");
 
You can specify a fully qualified class name with a root namespace and package names included as shown below.
Ext.define("DuraSoft.tech.extjs4.Book",{});
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 book1 = new DuraSoft.tech.extjs4.Book();
 
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. You’ll learn about loading
dependent files later in this chapter.
We’ll use Ext.create for creating objects in our code examples in this book.
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("DuraSoft.tech.extjs4.Book",{
constructor : function(){
console.log("Book created");
}
});
 
The second argument of the Ext.define method is an object that has a constructor property.
On creating an object of class DuraSoft.tech.extjs4.Book the constructor gets invoked and you’ll see Book created
printed on the console.
You can define properties of the class and initialize them in constructors.
Property
Let’s define our Book class with two properties title and price. These two properties will be initialized in our
constructors.
Ext.define("DuraSoft.tech.extjs4.Book",{
title : "",
price : -1,
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 Book class and initialize it as shown below.
 
var xml = Ext.create("DuraSoft.tech.extjs4.Book","XML",12.00);
console.log(xml.title);
console.log(xml.price);
 
You can access title and price properties using the object reference. The above code snippet prints XML and
12.00 in the console.
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("DuraSoft.tech.extjs4.Book",{
config : {
title : "",
price : -1,
authors: []
},
constructor : function(cfg){
this.initConfig(cfg);
}
});
 
In the code snippet above, we’ve defined a Book 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 Book class as shown below.
 
var xml = Ext.create("DuraSoft.tech.extjs4.Book",{
title : "XML for beginners", authors : ["Sam","Kim"]
});
 
We’ve created the Book object by initializing the title and authors 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 xml is a reference to the Book object,
you can access the properties as shown below.
console.log(xml.getTitle());
xml.setPrice(12.00);
console.log(xml.getAuthors()[0]);


    		 RSS of this page