When we need to work with elements from the DOM (Document Object Model) it is very important to know the object "Element" because it contains methods that will make our job easier.

Wait until the DOM is ready to be used

We have learned in the first chapters of this course how to do this, but this time I will use an object that will be properly packaged to explain the functionality of the object "Element", in this way we will avoid future conflicts with third-party code.

//we create the "package"
Ext.namespace('com.quizzpot.tutorial');

com.quizzpot.tutorial.Element = {
	init: function(){
		//the code of this tutorial will go here
	}
}
//When the DOM is ready we will call the function "init"
Ext.onReady(com.quizzpot.tutorial.Element.init,com.quizzpot.tutorial.Element); 

It is important to remember that the second parameter we pass to the event "onReady" it's the context where is going to be executed.

Obtain an element

We normally use the method "document.getElementById" to get the elements from the document through its id, but with Ext JS we can get the elements in a different way:

var el = Ext.Element.get('my_id');
// or we can use the shortcut
var el = Ext.get('my_id');

There are many advantages of using this method because not only returns the DOM's element but also returns an object with methods and properties that we can manipulate, for example to add or remove CSS classes we do it like this:

//we get the element“panel”
var el = Ext.get('panel');
//we add a class “element”
el.addClass('element');
//we remove the class “anotherClass” of the element
el.removeClass('anotherClass');

We can also add styles to the element very easy by using the method "setStyle" like this:

//one style at a time
el.setStyle('background-color','#CFE5FA');
el.setStyle('border','1px solid #99BBE8');
//or many styles at the same time
el.setStyle({
	'background-color','#CFE5FA',
'border','1px solid #99BBE8'
});

There are a lot of methods that are available and can help us to do our job efficiently. Let's see the following example:

//Center the element in the screen
el.center();
//change the opacity of the element to 85%
el.setOpacity(.85);
		
//obtain the element's parent
var parent = el.parent();
//adding some styles to the parent
parent.setStyle({
	'background-color':'#ccc',
	'font-family':'"Trebuchet MS",Arial,sans-serif',
	'font-size':'.9em'
});

//make the content of the element not selectable
el.unselectable();

//remove the element from the DOM
el.remove();

Improve the performance

If we only need to modify a property of an element in a single line of code and we don't need to have a reference to this object, is very convenient to use the method "fly" of the class "Element" because it allows us to save the browser's memory since it doesn't create an instance of the class Element to let us manipulate the object but uses the same memory over and over again, for example to change a style we will have to do this:

Ext.Element.fly('footer').setStyle('border','1px solid #aaa');
// or the shortcut
Ext.fly('footer').setStyle('border','1px solid #aaa');

Conclusions

The class "Ext.Element" can be used in our applications to manipulate the DOM, that's why is very important to know the methods that this class has in order to use them when is convenient. I recommend you to see the API of this class to know it better.

Te gustaría recibir más tutoriales como este en tu correo?

Este tutorial pertenece al curso Learning Ext JS 3, te recomiendo revises el resto de los tutoriales ya que están en secuencia de menor a mayor complejidad.

Si deseas recibir más tutoriales como este en tu correo te recomiendo registrarte al curso, si ya eres miembro solo identifícate y registrate al curso, si no eres miembro te puedes registrar gratuitamente!