Bleext http://www.bleext.com Just another WordPress site Sun, 13 May 2012 06:10:43 +0000 en-US hourly 1 http://wordpress.org/?v=3.4.2 Loading classes dynamically with ExtJS4 http://feedproxy.google.com/~r/Bleext/~3/Fc5aV-bi5-M/ http://www.bleext.com/blog/loading-classes-dynamically-with-extjs4/#comments Mon, 21 Nov 2011 09:00:03 +0000 Crysfel Villa http://www.bleext.com/?post_type=bleext_blog&p=140 Ext JS 4 introduces a simple way to load classes on demand, this will allow us to optimize the initial load of our application and only load the modules when the user requests.

In a previous tutorial I talked about the conventions we should follow in order to use in a very simple way the Ext.Loader, today I will show how to use it on our own project.

Configure the Paths

First we must define where our classes will be located, in languages ​​like Java there is something called “classpath” which is where the classes we created are, in Ext4 there is a similar concept and to define the “path” we have to do the following:

Ext.Loader.setConfig({
	enabled	: true,
	paths	: {
		Bleext	: "js/Bleext"
	}
});

In the previous code we enabled the Loader and assign it a path, from now on every time we load a class whose main namespace is “Bleext”, the Loader will look for the file in the folder “js/Bleext”.

We can also define more paths, for example:

Ext.Loader.setConfig({
	enabled	: true,
	paths	: {
		Bleext	: "js/Bleext",
		CRM	: "js/Crm"
	}
});

Load classes dynamically

First of all let’s create the class so we can load it later, if you remember, one of the conventions is that the name of the file must be the same as the class, also the file must be located according to the namespace assigned. Let’s create a file in the “js/Bleext/training/UsuarioPanel.js” and then define the class as follows:

Ext.define("Bleext.training.UsuarioPanel",{
	extend		: "Ext.panel.Panel",
	
	title		: "User",
	width		: 300,
	height		: 250,

	initComponent	: function() {
		var me = this;
		
        	me.html = "This is Jhon Doe!";

		me.callParent();
	}
});

The previous class extends from the panel class and adds a title, size and content, it doesn’t have any important functionality but it’s enough for this example.

The next thing is to load the class and instantiate it as follows:

//...

//Loading the class
Ext.require("Bleext.training.UsuarioPanel");

Ext.onReady(function(){
	var john = Ext.create("Bleext.training.UsuarioPanel",{
		renderTo	: Ext.getBody()
	});
	
	john.center();
});

This code goes in the app.js file we created at the beginning, we’ve already configured the Loader with the paths there.

Finally, it is necessary to create the HTML which includes the Ext4 library and the file app.js.

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>ExtJS Loader</title>
	<link rel="stylesheet" href="../common/js/Ext/resources/css/ext-all.css" type="text/css" media="screen" title="no title" charset="utf-8">
	<script src="../common/js/Ext/ext-all-dev.js" type="text/javascript" charset="utf-8"></script>
	
	<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
	
</body>
</html>

When you run the example in the browser you will see a nice panel in the center of the screen, as shown in the following image:

Loading dynamic class i ExtJS

Using the Loader

Load only the necessary classes of Ext

So far we have uploaded the entire library of Ext JS, but sometimes we don’t use all components of the library and it may not be worth it to load it, for those cases we can load only those components we need, to do that we need to use the file “ext-dev.js” instead of “ext-all-dv.js”

<!-- Delete this line -->
<script src="../common/js/Ext/ext-all-dev.js" type="text/javascript" charset="utf-8"></script>

<!-- add this line in the HTML -->
<script src="../common/js/Ext/ext-dev.js" type="text/javascript" charset="utf-8"></script>

The file ext-dev.js only contains the classes needed to load classes on demand, also it contains some other utilities.

If we update the example on the browser at this moment we will see an error telling us that the class couldn’t be loaded: “Failed loading ‘src/panel/Panel.js’, please verify that the file exists”.

Failed loading 'src/panel/Panel.js', please verify that the file exists

We need to set the correct path

This happens because we need to specify the path where the library is found, in this case I have it located in a folder called “common/js/Ext”, in that folder there’s another folder called “src” where all the classes are separated by file, this is the location where we should set the path so the files can be loaded, let’s modify the “app.js” file and add the new path as follows:

Ext.Loader.setConfig({
	enabled	: true,
	paths	: {
		Ext	: "../common/js/Ext/src",
		Bleext	: "js/Bleext",
		CRM	: "js/Crm"
	}
});

Now we can see the the panel in our screen and if we open the console we’ll see all the files that have been loaded dynamically.

Loading dynamic class i ExtJS

Loading too many classes

You probably noticed that the panel was rendered slower than when we loaded the classes dynamically, this is because more files are being downloaded, the best thing to do is to create a custom version of Ext with only the classes that we’ll use and compressed it into a single file to avoid downloading all the separate classes. Later on I will show how to create a customized Ext version because it requires a separate tutorial.

Conclusion

In this tutorial we saw how to configure the loader and load classes dynamically, also we saw how to load the classes from the Ext library. When our application is deployed in production it is recommended to generate a single compressed file with the version of Ext, also the packages should be compressed too and contain all the classes of the modules of our application. In future tutorials I will talk more about the Loader since there are other things to talk about.

Remember to follow us on twitter or subscribe to our mailing list in order to receive updates for coming tutorials about Ext JS.

]]> http://www.bleext.com/blog/loading-classes-dynamically-with-extjs4/feed/ 5 http://www.bleext.com/blog/loading-classes-dynamically-with-extjs4/ Naming conventions http://feedproxy.google.com/~r/Bleext/~3/PiY02hrm4Gc/ http://www.bleext.com/blog/naming-conventions/#comments Fri, 18 Nov 2011 09:17:25 +0000 Crysfel Villa http://www.bleext.com/?post_type=bleext_blog&p=138 Ext JS 4 introduces a file upload system on demand, something that was sorely missing in previous versions, if you need to use this new class loading system there are certain rules and conventions that we need to follow in order to make our lives easier.

Here are the conventions to consider when defining a class if we want to use the Ext Loader class to load our classes dynamically.

Classes and files with the same name

When trying to load a class we do it by its name, which is why it is very important that both, the name of the class and the name of the file are identical. That is, if we create a class called “User” we must create a file called “User.js” that will contain the code.

// User.js
Ext.define("User",{
    name  : "John"
});

Using “Camel case” for class names

We recommend using “camel case” to define the class name, this will allow us to easily differentiate between a class and a package, for example User, Role, UserRole.


Ext.define("UserView",{
    name  : "John",
    // ...
});

Ext.define("UserGrid",{
    name  : "John",
    // ...
});

Namespaces in lowercase

The packages should be name in lowercase to easily differentiate between classes and packages:


Ext.define("Bleext.users.controller.UserController",{
    // ...
});

Ext.define("CRM.security.groups.view.GroupsGrid",{
    // ...
});

Packages as folders

Usually when we create a class we define it in a “namespace” (if you still do not: do it!), it is recommended that for every “dot” there must be a physical folder, for example, if we have a class called “Bleext.users.controller.UserController” there should be a file in the path “Bleext/users/controller/UserController.js”, this is very important so the Loader can work properly.

// Bleext/users/controller/UserController.js
Ext.define("Bleext.users.controller.UserController",{
    // ...
});

// CRM/security/groups/view/GroupsGrid.js
Ext.define("CRM.security.groups.view.GroupsGrid",{
    // ...
});

Avoid using numbers in the names

Avoid the use of numbers in package names or class names like Users4Roles, Class2 and similar names should be avoided. Let’s try to assign meaningful names and properly packaged. Avoid using acronyms in class is also recommended.

But there’s always an exception to the rule, since there are algorithms such as MD5 or SH4 we can use for a class name and the some acronyms like HTTP can be used if necessary.

Avoid using underscores

Avoid using the underscore (_) to separate words in the name of a class or package; User_Role, User_Grid are examples of names that we should avoid using.


//evitar esto
Ext.define("Bleext.users.controller.User_Controller",{
    // ...
});

These are only conventions, nobody is obliged to follow them but if we use them we can use the Loader in a very simple, in the following tutorial I will talk about it more.

We’re planning to write more tutorials about Ext JS, follow us on twitter, subscribe to our mailing list or our feeds if you want to receive our updates.

]]> http://www.bleext.com/blog/naming-conventions/feed/ 4 http://www.bleext.com/blog/naming-conventions/ Configurations, Statics and Singleton in Ext JS 4 http://feedproxy.google.com/~r/Bleext/~3/AbQKlS-P0Z4/ http://www.bleext.com/blog/configurations-statics-and-singleton-in-ext-js-4/#comments Wed, 16 Nov 2011 08:29:21 +0000 Crysfel Villa http://www.bleext.com/?post_type=bleext_blog&p=136 As I mentioned in previous tutorials, Ext4 adds new functionality to the classes in a very simple way using the pro/pre-processors, this tutorial will explain how to use configurations, create static properties and define a class as Singleton.

Using configurations

It is common that when we create classes we define the settings for them, usually these settings will serve to modify the behavior of the class or possibly to modify the visual appearance of the component.

In previous versions, we used to define the configurations as properties of the class, these were overwritten when an instance was created. In ExtJS 4 there’s a new property called “config”, which is an object that is designed to contain all the configurations that are needed in a class.

Ext.define("Bleext.desktop.User",{
	config	: {
		name	: "John",
		lastname: "Doe"
	},
	
	constructor	: function(options){
		this.initConfig(options);
	}
});

Within the object “config” we can add any number of properties that will be used as configurations, this allows us to keep the settings grouped improving the organization of our code.

Another important aspect is that in the constructor the configurations are being initialized, with the parameter “options” we can initialize the configurations for each instance we create.

var john = Ext.create("Bleext.desktop.User",{
	name	: "Susan"
});

console.log(john.getName());

john.setName("Mary");

console.log(john.getName());

In the previous code we created an instance of the class “User” and overwritten the configuration “name” assigning it “Susan”, later we can make use of getters and setters that are automatically created for each configuration, for example “getName” and “setName”.

Defining static methods and properties

To define a static property we only need to use the property “statics” and assign it an object with all methods and properties that will belong to the class and not the instance.

Ext.define("Bleext.desktop.User",{
	config	: {
		name	: "John",
		lastname: "Doe"
	},
//Properties that will be added to the class and not the instances
	statics		: {
		VISITOR		: 1,
		USER		: 2,
		ADMINISTRATOR	: 3
	},
	
	constructor	: function(options){
		this.initConfig(options);
	}
});

In the previous example qw defined three properties, these properties will only exist in the class and is not necessary to create instances to invoke them.

console.log(Bleext.desktop.User.VISITOR);
console.log(Bleext.desktop.User.USER);
console.log(Bleext.desktop.User.ADMINISTRATOR);

Singleton

By definition a “singleton” class is the kind of class where you cannot have more than one instance of it, in Ext JS 4 to define a class of this kind we only have to add the property “singleton” equal to true.

Ext.define("Bleext.desktop.Constants",{
	singleton	: true,
	
	LOGIN_URL	: "/login.do",
	LOGOUT_URL	: "/logout.do",
	
	GET_USERS_URL	:  "/users/all",
	GET_USER_URL	: "/users/get"
});

console.log(Bleext.desktop.Constants.GET_USERS_URL);

The previous class instance doesn’t need to instantiated, because we have access to the members directly. If for some reason we wanted to create an instance of this class we would receive an error when trying.

//'Bleext.desktop.Constants' is a singleton and cannot be instantiated
Ext.create("Bleext.desktop.Constants");

This happens because the singleton class can not be instantiated by definition.

Conclusion

This tutorial briefly describes three new features in the class system that Ext4 introduces, we can see that certain tasks are much clearer than in previous versions (such as singleton classes or configurations). Normally the singleton class is used to handle the “Constants” of an application or any other circumstance which requires a single instance of a class.

]]> http://www.bleext.com/blog/configurations-statics-and-singleton-in-ext-js-4/feed/ 3 http://www.bleext.com/blog/configurations-statics-and-singleton-in-ext-js-4/ Using alias and xtype in Extjs4 http://feedproxy.google.com/~r/Bleext/~3/ZKl-NzsEIrE/ http://www.bleext.com/blog/using-alias-and-xtype-in-extjs4/#comments Mon, 14 Nov 2011 13:10:53 +0000 Crysfel Villa http://www.bleext.com/?post_type=bleext_blog&p=134 The Ext JS version 4 provides several interesting options, the way in which the xtype of the components is defined has changed and it has new special properties now. In this tutorial I will show you the new features.

Defining el xtype

If you’ve worked with ExtJS version 3 you already know what is the xtype, but in short the xtype is an alias to define components in a literal way, for example:

Ext.define("Bleext.training.Teacher",{
	extend 	: "Ext.panel.Panel",
	alias		: "widget.teacher"

	// ...
});

In the previous class we used the property “alias” to define the xtype of the class, as opposed to Ext3 in this version we have to assign a prefix. The prefix ​​”widget” is used in the case of any class that inherits directly or indirectly from “Ext.Component”, there are several prefixes for the different components that exist within the framework.

Prefixes in the xtype

To identify which prefixes are available we can run the following code:

var prefix = {},
	values = [];
	
Ext.Object.each(Ext.ClassManager.maps.aliasToName,function(key,value){
	var px = key.split(".")[0];

	if(!prefix[px]){
		prefix[px] = px;
		values.push(px);
	}
});
console.log(values);

The class “ClassManager” is responsible for creating the classes, that’s the reason why the “alias” of all the classes that exist in the framework are defined here. The result of the previous code is the following:

[layout,writer,data,reader,proxy,widget,axis,store,series,association,direct,state,formaction,feature,editing,plugin,selection]

Basically the prefix is used to group classes, in this way we can have a xtype “store.teacher” and other “widget.teacher”, the difference is the prefix.

Creating the class using its xtype

Having defined the class and assigned the alias with its own prefix, we can instantiate the class using the xtype as follows:

Ext.onReady(function(){
var p = Ext.create("Ext.panel.Panel",{
	width	: 300,
	height	: 400,
	items	: [{
		xtype	: "teacher",	//Using the xtype
		title 	: "John Doe",
		html	: "I'm a teacher!"
	}],
	renderTo	: Ext.getBody()
});
p.center();
});

It is important to notice that when instantiating the class “Teacher” we are not using the prefix, this is because it inherits from “Ext.Component” (indirectly) and all components use the prefix “widget” therefore is not necessary to use the prefix.

We may also use the method “widget” as follows:

var susan = Ext.widget("teacher",{
	title 	: "Susan Smith",
	html	: "I'm a teacher"
});
var p = Ext.create("Ext.panel.Panel",{
	width	: 300,
	height	: 400,
	items	: [{
		xtype	: "teacher",	//Using the xtype
		title 	: "John Doe",
		html	: "I'm a teacher!"
	},
		susan  //adding the instance susan to the container that we already had
	],
	renderTo	: Ext.getBody()
});

Conclusion

When defining an alias to the class we are creating we can easily instantiate it later under that alias, this prevents us from writing a few extra lines of code and it helps us define the components faster.

]]> http://www.bleext.com/blog/using-alias-and-xtype-in-extjs4/feed/ 2 http://www.bleext.com/blog/using-alias-and-xtype-in-extjs4/ Multiple inheritance in Ext 4 (mixins) http://feedproxy.google.com/~r/Bleext/~3/3zxt87PC4GA/ http://www.bleext.com/blog/multiple-inheritance-in-ext-4-mixins/#comments Wed, 09 Nov 2011 06:56:43 +0000 Crysfel Villa http://www.bleext.com/?post_type=bleext_blog&p=93 This new version (Ext4) has been written completely new, with the purpose of making it very flexible and easy to learn, one of the new features that this version provides is that now we can do multiple inheritance using mixins. In this tutorial we will see how to use mixins and use them correctly.

To set multiple inheritance to a class we simply have to add the property “mixins”, this property must be an object with all the classes we want to inherit from or want to mix.

Ext.define("Bleext.training.Icon",{
	mixins	: {
		floating		: "Ext.util.Floating",
		observable	: "Ext.util.Observable"
	}
	//......
});

In the previous example we created a class called “Icon”, this class inherits directly from “Ext.Base” because we didn’t explicitly inherit from another class, by using the property “mixins” we are saying that the class “Icon” will inherit from two classes: ” floating “and” observable “.

The Floating class contains the methods necessary to position an element in the coordinates “X” and “Y” that we indicate to the instance, while the class “Observable” allows us to handle events within the class “Icon”.

If at this time we create an instance of “Icon” we will have all the properties and methods of the class “Ext.Base”, “Floating” and “Observable”.

Overriding the constructor

So far we have not defined a constructor for the class we’ve created, so the question is, what constructor of the three classes we are “inheriting” will be executed when the instance is being built?

To answer the previous question we must understand that the “pre-processor” (In a future post I will explain about the pre/post-processors) of mixins copies the methods and properties IF that method or property DOES NOT EXIST in the target class.

According to the mentioned previously the class “Icon” inherits the constructor of the class “Base” by single inheritance, this means that the constructors of “Floating” and “Observable” are not being executed and probably these constructors have important actions. So what we need to do is run the constructors of the mixins manually.

Ext.define("Bleext.training.Icon",{
	mixins	: {
		floating	: "Ext.util.Floating",
		observable	: "Ext.util.Observable"
	},
	
	width	: 100,
	height	: 100,
	border	: true,
	
	constructor	: function(options){
		Ext.apply(this,options);
		
		this.id = Ext.id(null,"icon-");	//Assigning a dynamic identifier

		this.addEvents("moved","created");	//method inherited from the class Observable
		
		if(this.renderTo){
			this.render(this.renderTo);
			delete this.renderTo;
		}
		
		this.mixins.floating.constructor.call(this);	//executing manually the
		this.mixins.observable.constructor.call(this); //constructors of the mixins
	}
});

To access the instances of the mixins we must use the property “this.mixins” followed by the name we assigned when we configured it.

This same concept is applied when there are methods with the same name in different classes that are inherited.

Rendering the Icon class

In the previous code the method “render” was executed if the property “renderTo” has been defined in the configuration parameters, it is our duty to implement this method.

render		: function(where){
	if(where){
		this.container = Ext.get(where);			// 1
		this.el = Ext.core.DomHelper.append(where,{	// 2
			id	: this.id,
			tag	: "div"
		});
		this.el = Ext.get(this.el);
		this.el.setStyle({					// 3
			width	: this.width?this.width+"px":"auto",
			height	: this.height?this.height+"px":"auto",
			border	: this.border?"1px solid #aaa":"none",
			background	: "#eee"
		});
	}
},
	
setPagePosition	: function(xy){		// 4
	this.el.setLeftTop(xy[0]+"px",xy[1]+"px");
	this.fireEvent("moved",xy);
}

In step 1, the reference of the container element is taken using the “Ext.get” method which returns an instance of the object “Ext.Element” which contains the reference to the DOM and also several methods to manipulate it in a simple manner.

In step 2 the element that will represent the class “Icon” is created, using the class “Ext.DomHelper” we can create DOM ​​elements in a very simple way, in this case we used the method “append” to add a node to the container .

In step 3 we apply the styles such as width, height, etc… These styles can be sent using the configuration object to change the default values.

In step 4 we define a function to assign the position of the element that represents the class “Icon”, this method is required to use the method “center” that we inherited from the class “Floating”.

Instantiating the class Icon

We have created a class that uses mixins, now we are going to test it by using an instance of it and executing some of the inherited methods.

Ext.onReady(function(){
	var icon = Ext.create("Bleext.training.Icon",{
		renderTo	: Ext.getBody()
	});

	icon.on("moved",function(xy){	//inherited from Observable
		console.log(xy);
	});
	
	icon.center();			//inherited from Floating
});

When you execute the example you will see a square in the center of the screen, we didn’t programmed the functionality of centering the square because we inherited that functionality from the class “Floating” which is responsible for calculating the center.

We also used the method “on” that has been inherited from class “Observable” and it’s used to add events to classes.

Difference between a mixin and plugin

Through mixins we can add properties and methods to a class, but if you think about it plugins do the same thing right? Yes, they do something very similar, they add extra functionality to a class.

The main difference is that a mixin is added at the class level and a plugin is added at the instance level, this means that the mixins are part of the definition of the class, while the plugins are not.

Conclusion

The mixins are useful to mix or add functionality from other classes to the class that we are defining, it help us to design a more robust and flexible application.

]]> http://www.bleext.com/blog/multiple-inheritance-in-ext-4-mixins/feed/ 1 http://www.bleext.com/blog/multiple-inheritance-in-ext-4-mixins/ Single Inheritance http://feedproxy.google.com/~r/Bleext/~3/fFJNHpyRKzA/ http://www.bleext.com/blog/single-inheritance/#comments Wed, 26 Oct 2011 13:27:37 +0000 Crysfel Villa http://www.bleext.com/?post_type=bleext_blog&p=90 Ext JS has always been characterized as an object oriented library, from the first version Ext JS has provided a system for creating classes and inheritance, among releases it has been changing a bit, but in version 4 the system classes have changed considerably.

We saw how to create classes with the new system, now we will learn how to extend a class and add extra functionality.

Extending

To extend a class we must define the property “extend” followed by the class from which we want to inherit.

Ext.define("Bleext.training.UserPanel",{
	extend 	: "Ext.panel.Panel",	//<-- Inheritance

	title 		: "User information",
	width		: 300,
	height		: 300,
	bodyPadding	: 10,
	html		: "Testing!"	
});

By using the “Ext.define” method we are defining a class that inherits from “Ext.panel.Panel”, when we do this automatically our class has all the methods and properties of the panel, apart from this we can configure or specialize our class. In this case we have only added a few configurations, the following thing we need to do is to create an instance of that class and render it somewhere in our document.

Ext.onReady(function(){
	Ext.create("Bleext.training.UserPanel",{
		renderTo	: "center"	//<-- the DIV in where we defined the html
	});
});

Inheriting from Ext.panel.Panel

Inheriting from Ext.panel.Panel

The method "Ext.onReady" (as in version 3) executes the anonymous function as a parameter when the DOM is ready, therefor inside of that function we create an instance of the class we've just defined.

Using a template

In Ext4 there's a property called "tpl" which lets you add an instance of the class Ext.XTemplate or an array with the parameters that will be received by the XTemplate class so it be created automatically, also we can define a property "data" with the information the template will use.

Ext.define("Bleext.training.UserPanel",{
	extend 	: "Ext.panel.Panel",	//<-- Inheritance

	title 		: "User information",
	width		: 300,
	height		: 300,
	bodyPadding	: 10,
	html		: "Testing!"

	data		: {
		name	: "John",
		lastname: "Doe",
		company	: "Bleext",
		age	: 27,
		status	: "Active",
		phone	: "(12) 34 567 890"
	},
	tpl		: [
		'<p><strong>Name</strong>: {name} {lastname}</p>',
		'<p><strong>Company</strong>: {company}</p>',
		'<p><strong>Age</strong>: {age} years old</p>',
		'<p><strong>Phone</strong>: {phone}</p>',
		'<p><strong>Status</strong>: {status}</p>'
	]	
});

Using a template for the content

Using a template for the content

Notice how in the templates we defined the fields of the object "data" between braces "{" and "}", this will replace the values ​​dynamically in the generated HTML.

Overriding methods

It is very common when develop in an object-oriented way to add extra functionality on the methods or specialized them in some specific task of the class we are defining.

When overwriting a method we should consider that we are eliminating the functionality that was inherited, therefore we must call the super class method to lose nothing. Ext JS 4 provides a simple way to execute a method that has been over-written, we just have to run the method "callParent" and the library automatically identifies the correct method.

Ext.define("Bleext.training.UserPanel",{
	extend 	: "Ext.panel.Panel",	//<-- Inheritance

	title 		: "User information",
	width		: 300,
	height		: 300,
	bodyPadding	: 10,

	data		: {
		name	: "John",
		lastname: "Doe",
		company	: "Bleext",
		age	: 27,
		status	: "Active",
		phone	: "(12) 34 567 890"
	},
	tpl		: [
		'<p><strong>Name</strong>: {name} {lastname}</p>',
		'<p><strong>Company</strong>: {company}</p>',
		'<p><strong>Age</strong>: {age} years old</p>',
		'<p><strong>Phone</strong>: {phone}</p>',
		'<p><strong>Status</strong>: {status}</p>'
	],

	initComponent	: function(){
		var me = this;
		
		me.tbar = [{text:"Save"},{text:"Edit"},{text:"Delete"}];

		me.callParent();	//<-- super class call
	}
});

Overriding the method initComponent

Overriding the method initComponent

In the previous example we are overwriting the method "initComponent" to add a toolbar at the top part of the panel, notice how in the last line the "initComponent" of the super class is called, this is very important because if we don't do it the component will not work, this is because in the super class the "initComponent" makes several important things.

In Ext3 there was a property called "superclass" that was added as static to the classes, this has disappeared and instead we have to use the method "callParent" which is smart enough to know which method needs to be called in the super class.

Conclusion

ExtJS was created to be inherited, as we develop our own application we will use single inheritance to extend the components that the library has. In today's example we created an user form extending from the panel class, we can extend from any other class of the framework and specialize it through simple inheritance.

]]> http://www.bleext.com/blog/single-inheritance/feed/ 3 http://www.bleext.com/blog/single-inheritance/ Creating Classes in ExtJS 4 http://feedproxy.google.com/~r/Bleext/~3/by3EX1YDhQ0/ http://www.bleext.com/blog/creating-classes/#comments Mon, 24 Oct 2011 13:47:18 +0000 Crysfel Villa http://www.bleext.com/?post_type=bleext_blog&p=87 Ext4 defines a new way of creating classes, I think it is much simpler and clearer to understand the way it works now, also with the new pre-processors and post-processors we have many possibilities to create our classes.

In this tutorial I’m going to show you how to create simple classes, ExtJS 4 introduce a great way to deal with classes.

Class definition

To create a simple class we only have to use the method “Ext.define” or “Ext.ClassManager.create” as follows:

Ext.define(Name,Configurations,Callback);
Ext.ClassManager.create(Name,Configurations,Callback);

The first parameter defines the name of the class and it must be a String.
The second parameter defines the members of the class and it should an object with all the properties and methods we need in the new class.
The third parameter defines a function (optional) that its executed when the class is created, this is useful when creating classes that have to be included asynchronously using the Loader.

Here is an example of a class called User:

Ext.define("Bleext.training.User",{
username	: "",
password	: "",

login		: function(){
	console.log("Loging in....");
},

logout		: function(){
	console.log("Loging out....");
}
});

We have created a class called “User” in the namespace “Bleext.training”. Unlike Ext3, now we will define the name and the namespace in the first parameter and is no longer necessary to use the traditional Ext.ns that we used in version 3.
The second parameter is an object with two properties and two methods, in here we can define whatever we need.

Overriding the constructor

In the previous example we didn’t define a class constructor, therefore Ext assigned an empty constructor, if we wanted to define one we would have to use the property “builder” as follows:

Ext.define("Bleext.training.User",{
username	: "",
password	: "",

constructor	: function(options){
	Ext.apply(this,options || {});

	console.log("A new user!");
}

login		: function(){
	console.log("Loging in....");
},

logout		: function(){
	console.log("Loging out....");
}
});

The property “constructor” is a special configuration (as in Ext3) that allows us to define the function that will build the object we are defining, in this case when we call the method “Ext.apply” it copies the contents of the object “options” to the instance that will be created, this gives us the possibility that when we create the instance we can assign values to the properties that were defined.

Instance creation

Once we have defined the class we can generate objects from it, to do this is necessary to invoke the method “Ext.create” or the method “Ext.ClassManager.instantiate” as follows:

Ext.create(Class,Options);
Ext.ClassManager.instantiate(Class,Options);

Both methods do exactly the same, the first parameter defines the class that we want to instantiate (String) and the second parameter is an object with the settings that will be applied to the instance, for example:

var john = Ext.create("Bleext.training.User",{
	username	: "john",
	password	: "123"
});

console.log(john);

When we print the object “john” in the console we will see how the original properties are overwritten with the settings that we assigned when we to created the instance.

Conventions

It’s not a rule, but it is a convention that when we name a class we should use the format “camel case”, for example:

UserPanel, 
UserGrid, 
UserForm, 
UserStore

There is another convention that recommends writing in “camel case” the root object of our “namespace” and write in lowercase all the packages, so you can easily differentiate between classes and packages, for example:

Bleext.modules.security.roles.controller.Roles
Bleext.modules.security.roles.model.Role
Bleext.modules.security.roles.store.Roles
Bleext.modules.security.roles.view.RolesGrid
Bleext.modules.security.roles.view.RolePanel

The previous examples show how we should define the name of our classes, as you can see it’s very easy to differentiate the “packages” from the classes.

Performance Analysis

If you noticed, the object Ext.ClassManager is responsible for the creation and management of classes within the framework, this object does several interesting things and it’s worth analyzing thoroughly to understand its operation.

When we create a class using “Ext.define” the method “Ext.ClassManager.create” is called and internally creates an instance of the class “Ext.Class”, this means that all the classes we define are instances of “Ext.Class”.

Ext.Class defines a process at the moment when the classes are instantiated, there are two major phases running in this process, “pre-processing” and “post-processing”, basically in these phases can add actions, by default there are several already defined, in the pre-processing phase we can find the following actions:

extend,statics,inheritableStatics,mixins,config

These actions allows you to execute portions of code before the class is created sequentially, for example the action “extend” copies the prototypes of the superclass for the inheritance, the action “statics” statically defines the properties or methods that we defined in the new class and so on are executed the pre-processors in sequence.

Later in this blog we will see in detail each of these actions and how we can add them our own processes.

Another interesting point is that by default (if not define differently) the classes we create inherit from Ext.Base, this class defines the abstract functionality for all classes, we can find here methods such as “callParent”, “initConfig”. Later on we will discuss further details of this, but it is important to know that all classes inherit from “Ext.Base” either directly (if we didn’t define a super class) or indirectly (if it inherits from an existing class).

Conclusion

As we have seen, the class system is very flexible and complete, also the syntax for creating classes is quite understandable, on future posts we will talk about more features of using classes such as “mixins”, “configs”, “statics” and so on.

]]> http://www.bleext.com/blog/creating-classes/feed/ 6 http://www.bleext.com/blog/creating-classes/ Installing Ext JS 4 http://feedproxy.google.com/~r/Bleext/~3/EmsHDcmqRzE/ http://www.bleext.com/blog/installing-ext-js-4/#comments Thu, 20 Oct 2011 20:42:19 +0000 Crysfel Villa http://www.bleext.com/?post_type=bleext_blog&p=84 As many of you have heard, Sencha (the company behind the development of ExtJS) has released the version 4 of the ExtJS framework a couple of months ago, if you’ve been working with previous versions you will notice many differences; in this tutorial I will show you how to install the version 4 of ExtJS .

 

Bidding farewell to the adapter

For those who have been developing since the version 1 came out, we know that Ext JS was born as an extension of YUI, later on prototype, jQuery and base are introduced. To run the library with any of these four was necessary to import the adapter to serve as an “interpreter” between Ext and selected library (jQuery for example).

This has changed for the version 4, because is no longer necessary to import the adapter, in fact Ext is no longer an extension of any library and the developers of Sencha have decided to support only the Ext Core which is a library like jQuery or Prototype. This decision was taken so the Sencha Touch (which is the Mobile Library) could share code with ExtJS 4, besides several other advantages.

Welcome Ext Dev

When you download the version 4 you will find several files in the root directory, ext-all.js, ext-all-debug.js, ext-all-dev.js, ext.js, ext-dev.js

The file ext-all.js as in past versions contains all the library classes compressed and ready to go to the production environment.

In the ext-all-debug.js file the classes are uncompressed and is the file that we used in previous versions for the development environment.

In this version we find the ext-all-dev.js file, this file also contains the entire framework, but also contains error and warning messages that will be useful in the development phase, so from now on we should use it to develop.

We also find the files ext-dev.js and ext.js, these files are intended for when you do not need to load the entire library and just want to use a specific component, this means that these files only load the basic to be able to load dynamically only the classes that are required, we will discuss this later in detail.

Installation example

To install the library in a development environment is necessary to import the “ext-all-dev”, we also need to import the styles so the components can be displayed correctly. The HTML would be as follows:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Ext.Panel</title>
    <!-- Importing styles -->
    <link rel="stylesheet" type="text/css" href="../js/Ext/resources/css/ext-all.css" />

    <!-- Importing the ext-all-dev.js -->
    <script type="text/javascript" src="../js/Ext/ext-all-dev.js"></script>
    
    <script type="text/javascript" >
        Ext.onReady(function(){
            alert("Ext has been installed successfully!");
        });
    </script>
</head>
<body>
	<div id="center"></div>
</body>
</html>

Make sure to assign the routes of CSS and JS correctly, the folder structure in this example is as follows:

+ course
   + classes
      - 01-installation.html
   + js
      + Ext
         - ext-all-dev.js
         + resources
            + css
               - ext-all.css

If you run the example in the browser and you get an error “Ext is undefined”, it’s very likely that the path to the file “ext-all-dev.js” is incorrect, be sure to write correctly.

If you run the example but you don’t get any error and still can’t see the components, is possible that the CSS path is incorrect, make sure it is spelled correctly and it is the correct path.

]]> http://www.bleext.com/blog/installing-ext-js-4/feed/ 7 http://www.bleext.com/blog/installing-ext-js-4/