OnLine

Extjs 4 VS Symfony 2

Modelos, Vistas y Controladores en Ext JS 4 Blog
Likes: 0 Persona Comentarios: 0 Publicado: 31/10/2013
Tags: Ext JS 4
Cuando desarrollamos aplicaciones de gran escala es de suma importancia definir una buena arquitectura, dividir nuestro código en capas nos permite tener un mejor control sobre el mismo así como facilitarnos el mantenimiento en un futuro. Ext4 nos permite implementar de una forma sencilla el patrón MVC para organizar nuestro código y separandolo en capas delegando resposabilidades específicas en cada una de ellas.
Los Modelos
Un modelo de datos nos permite definir y abstraer las propiedades de una entidad, en Ext JS usamos los modelos para llenar una colección para luego desplegar la información en un widget por ejemploun Grid, View, Combobox o algún otro. Es importante mencionar que en la capa del modelo solo modelamos la información que usaremos en las otras dos capas, aquí no definimos ni widgets ni tampoco eventos para agregar interacción con el usuario. Para definir un modelo lo hacemos de la siguiente manera:

Ext.define("Bleext.movies.model.Movie",{
extend : "Ext.data.Model",
fields : [{name:"title",type:"string"},
{name:"tns",type:"string"},
{name:"url",type:"string"},
{name:"author",type:"string"},
{name:"duration",type:"float"},
{name:"releaseDate",type:"date",formatDate:"Y-m-d"},
{name:"description",type:"string"}
]
});

Primeramente debemos extender de la clase “Ext.data.model”, esta clase nos da la funcionalidad necesaria para definir losmodelos que usaremos en nuestra aplicación. La clase que hemos creado contiene el campo “fields” que es un arreglo con los campos que contendrá este modelo, en este caso una película contiene título, url, tns, autor, duración, duración, fecha de salida y descripción. Un último punto a considerar es que debemos guardar el archivo dentro de la ruta “Bleext/movies/model/” con el nombre“Movie.js”, esto para que pueda ser cargado dinámicamente con el Loader. Como parte de la capa de datos vamos a definir aquí el “store” que almacenará los modelos para luego ser usados en un grid, para definir un store lo hacemos de la siguiente manera:

Ext.define("Bleext.movies.store.Movies",{
extend : "Ext.data.Store",
model : "Bleext.movies.model.Movie",

proxy : {
url :"services/movies.json"
reader : {
type : "json",
root : "data"
}
}
});

En primer lugar extendemos de la clase “Ext.data.Store” que es la clase que nos permite almacenar los los modelos y manipularlos de una manera sencilla. En segundo lugar le asignamos el modelo “Movie”, de esta manera le asociamos los objetos que manejara este store llamado “Movies”. Tercer pasodefinimos el proxy y le asignamos un reader para que interprete JSON, ahí podemos definir algunas otras configuraciones. Esta clase la guardamos en la ruta “Bleext/movies/store” y el archivo llamado “Movies.js”, por ahora hemos terminado con la capa de datos. Si has notado el store ha definido una “url” que apunta a “services/movies.json”, este servicio debería consultar algún sitio comoyoutube o vimeo para sacer la información a desplegar y regresar un JSON como el siguiente:

{
"data" : [
{"title":"A History of the Sky","author":"Ken Murphy","releaseDate":"2011-11-15","tns":"http://b.vimeocdn.com/ts/216/862/216862163_200.jpg","duration":4.52,"url":"http://player.vimeo.com/video/32095756","description":"This is a year-long time-lapse study of the sky. A camerainstalled on the roof of the Exploratorium museum in San Francisco captured an image of the sky every 10 secobnds. From these images, I created a mosaic of time-lapse movies, each showing a single day. The days are arranged in chronological order. My intent was to reveal the patterns of light and weather over the course of a year."},
{"title":"the raid on zuccotti park","author":"Casey...