Ext JS 4 introduce un sistema de carga de archivos bajo demanda, algo que hacía mucha falta en las versiones anteriores, si necesitamos usar este nuevo sistema de carga de clases necesitamos seguir ciertas reglas y convenciones que nos harán la vida más sencilla. A continuación se listan las convenciones a tomar en cuenta cuando definimos una clase.

Evitar el uso de guiones

Se recomienda evitar usar el guión (_) para separar palabras en el nombre de una clase o paquete, User_Role, User_Grid son ejemplos de nombres que debemos evitar usar.

//evitar esto
Ext.define('MyApp.view.admin_accounts.Clients_Grid',{
    // ...
});

Clases y archivos con el mismo nombre

Cuando intentamos cargar una clase lo hacemos por su nombre, es por esto que es de suma importancia que tanto el nombre de la clase como del archivo sean idénticos. Es decir, si creamos una clase llamada “User” debemos crear un archivo llamado “User.js” donde este el código de la clase.

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

Usar “Camel case” para los nombres de clases

Se recomienda el uso de “camel case” para definir el nombre de las clases, esto nos permitirá fácilmente diferenciar entre una clase y un paquete, ej: User, Role, UserRole.

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

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

Espacio de nombres en minúsculas

Los paquetes deberíamos nombrarlos en minúsculas para diferenciar fácilmente entre clases y paquetes:

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

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

Paquetes como carpetas

Normalmente cuando creamos una clase la definimos dentro de un namespace (si aún no lo haces: hazlo!!), se recomienda que por cada punto exista una carpeta física, por ejemplo, si tenemos una clase llamada Bleext.users.controller.UserController debería existir un archivo en la ruta Bleext/users/controller/UserController.js, esto es de suma importancia para que funcione correctamente el Loader.

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

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

Evitar uso de numeros en los nombres

Se recomienda evitar el uso de número en los nombres de paquetes o clase, nombres como Users4Roles, Class2 y semejantes deberían ser evitados, procuremos asignar nombres con significado y debidamente empaquetados. Evitar el uso de acrónimos en las clases también es recomendable.

Pero siempre hay una excepción a la regla, ya que hay algoritmos como por ejemplo MD5 o SH4 que podemos usar para nombrar una clase, así mismo los acrónimos como Http pueden ser usados de ser necesario.

Estás son convenciones, nadie está obligado a seguirlas pero si la seguimos podremos utilizar el Loader de una manera muy sencilla. En el siguiente tutorial hablaré al respecto, un tema muy interesante y útil para cargar dinámicamente clases.

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

Este tutorial pertenece al curso Fundamentos de Ext 4, 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!