The Adapter pattern is used to allow classes to work together when normally could not because of incompatible interfaces, by providing its interface to clients while using the original interface.

Libraries

We can be thankful that Ext JS was created as an extension to the library YUI and because its structure is well designed; because of this we can execute Ext JS over other libraries without a problem. The implementations that now exist of this pattern (Adapter) are actually for the jQuery library, Prototype and YUI, also Ext JS has its own library which is called Ext-base. We can find the adapters in the following path ext-2.2/adapter.

Installation

To install one of these libraries we need to import it to the document immediately after importing the adapter and at the end, we need to import the Ext JS framework. Here's an example on how to install jQuery.

<script type="text/javascript" src="../ext-2.2/adapter/jquery/jquery.js"></script>
<script type="text/javascript" src="../ext-2.2/adapter/jquery/ext-jquery-adapter.js"></script>
<script type="text/javascript" src="../ext-2.2/ext-all.js"></script>

Even though we can use any of the libraries we talked about before, we can only have one Adapter "linked" to a library.

Tests

To test if the jQuery library has been installed successfully we need to write jQuery code and execute it. We can test the jQuery installation when we change the event onReady of Ext JS following the jQuery style.

$(function(){
         $(document.body).css('background-color','#ccc');
         var win = new Ext.Window({
                   title:'Hello world',
                   width:400,
                   height:300,
                   minimizable:true,
                   maximizable:true
         });
         win.show();
});

One more test you can do is to change the background color of the body. You can do this with jQuery very easy, you just need to add the following line inside the event ready.

$(document.body).css('background-color','#333');

Conclusions

As you can see, it is very easy to install libraries that we want to use and we won't see any difference because Ext JS behavior will be the same with any of these libraries. During the rest of the course we will use the library Ext-base, since is the Ext JS owns library, but everyone can use the library of your choice or the best you know.

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!