ExtJS4: Data Package

SenchaSencha no duerme, a la espera de la beta de ExtJS4 siguen exponiendo funcionalidad parcial del mismo a través de su blog oficial. Esta vez, Ed Spencer nos revela los cambios en el manejo de datos, con grandes novedades en cuanto al mappeado de entidades en el cliente.

Para empezar, luego de todo el refactor general que recibió, el data package se compone de 43 clases (sí, cuarenta y tres).
En principio se supone (según posteos en el foro oficial) que la lógica de los data stores no debería diferir en demasía con lo que ofrece Sencha Touch en la misma área.

Dentro de estas (por ahora) 43 clases, se destacan tres, Model, Store y Proxy. Como puede observarse en el gráfico siguiente, estas tres clases estan auxiliadas por clases específicas cuyo rol está acotado a un único propósito.

ExtJS Data Package

De los cambios, es sin duda el de mayor interés la introducción de la clase Model en el manejo de datos, donde ahora se va a poder manejar las entidades como tales sin necesidad de desparramar su definición (campos, url, validaciones, etc).

/*
 * Registarmos el modelo User
 */
Ext.regModel('User', {
    fields: ['id', 'name', 'age'],
    proxy: {
        type: 'rest',
        url : '/users',
        reader: {
            type: 'json',
            root: 'users'
        }
    }
});

/*
 * Creamos un store directamente
 * contra el modelo
 * Notese que se puede referenciar
 * el modelo registrado por su nombre
 */
new Ext.data.Store({
    model: 'User'
});

Otra ventaja que presenta el uso de modelos, es que permite manejar los registros de una manera más atómica e independiente, donde cada registro conoce como debe almacenarse, lo cual simplica MUCHO la inserción de registros desde el cliente.
La lógica y datos requeridos corren a cuenta del proxy asociado, abstrayendo al modelo de dicha responsabilidad. Aparentemente, además de los datasources tradicionales (en memoria y remoto o Ajax) se le suma el local storage definido en la especificación de HTML5.

// Se obtiene una referencia al modelo
var User = Ext.getModel('User');

// Se instancia un registro..
var ed = new User({
    name: 'Ed Spencer',
    age : 25
});

// Y se persiste...
ed.save({
    success: function(ed) {
        console.log("Saved Ed! His ID is "+ ed.getId());
    }
});

// De igual manera puede obtenerse un registro por id
User.load(123, {
    success: function(user) {
        console.log("Loaded user 123: " + user.get('name'));
    }
});

Otro punto fundamental en la implementación de la clase Model, es la capacidad de relacionar los modelos entre sí, permitendo manejar las coleccionas al mejor estilo MongoDB / CouchDB.
Estas relaciones, permiten manejar los request de datos recursivamente según lo definido en los modelos que contenga.

// Registramos un modelo
Ext.regModel('User', {
    fields: ['id', 'name'],
    hasMany: 'Posts'
});

Ext.regModel('Post', {
    fields: ['id', 'user_id', 'title', 'body'],
    belongsTo: 'User',
    hasMany: 'Comments'
});

Ext.regModel('Comment', {
    fields: ['id', 'post_id', 'name', 'message'],
    belongsTo: 'Post'
});

// Cargamos el usuario e iteramos las colecciones
User.load(123, {
    success: function(user) {
        console.log("User: " + user.get('name'));

        user.posts().each(function(post) {
            console.log("Comments for post: " + post.get('title'));

            post.comments().each(function(comment) {
                console.log(comment.get('message'));
            });
        });
    }
});

Sin duda alguna, el Data Package promete mucho, será cuestión de tiempo ver si la implementación de widgets (Grids y Forms) logra exprimir todo el potencial que presenta.

Leer más:



Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Comment

You may use these tags : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>