Si no han oido de ExtJS, es un framework para RIAs (Rich Internet Application) basado en javascript, otros framework de RIA son Flex y Silverlight, los cuales estan basados en plataformas completamente diferentes ala de ExtJS, ya que ExtJS no requiere que se instale ningun plugin adicional a diferencia de Silverlight y Flex, ya que ExtJS lo unico que necesita es javascript.
ExtJS esta compuesto por varios componentes programados en javascript, similar al modelo de ASP.NET normal, por ejemplo, incluye un componente para Grids, uno para ventanas, formularios, etc., pero lo que convierte a ExtJS en un framework RIA es que todo lo hace a traves de JSON y AJAX, por lo que tener que refrescar la pagina es raro en aplicaciones hechas completamente en ExtJS, es como cargar una aplicacion de escritorio en el navegador.
ASP.NET MVC Y ExtJS
He estado utilizando ExtJS para un proyecto en la universidad y decidi utilizar ASP.NET MVC como tecnologia de servidor y descrubri que ExtJS y ASP.NET MVC se integran increiblemente bien, desarrollar las aplicaciones es mucho mas sencillo.
La curva de aprendizaje de ExtJS puede ser un poco inclinada (dificil) si no estan familiriazados con javascript pero una ves se acostumbren se van a dar cuenta porque los desarrolladores de ExtJS decidieron usar javascript.
Llenando un grid de ExtJS con datos de un controlador de ASP.NET MVC
Vamos a crear un grid sencillo y le vamos a cargar datos desde un controlador de ASP.NET MVC para que vean lo sencillo que es.
En ExtJS todo el acceso a datos se hace por medio de objetos de tipo Store, en nuestro caso vamos a usar un JsonStore, ya que nuestro controlador retornara datos serializados en formato JSON.
Descargando ExtJs y agregando referencias
La libreria la pueden descargar de www.extjs.com, luego copien los archivos que se muestran en la imagen a un nuevo directorio llamado extjs dentro de la carpeta “Scripts” de la aplicacion.
La estructura dentro de la aplicacion debe quedarles asi:
Ahora agreguen estas referencias al master page o ala pagina donde quieran usar la libreria:
<script src="/Scripts/extjs/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="/Scripts/extjs/ext-all.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="/Scripts/extjs/resources/css/ext-all.css" />
Este es el codigo del controlador que vamos a utilizar, cree una clase de nombre Empleado que vamos a retornar,y tambien cree un metodo para generar empleados y asi poder retornar la lista de empleados.
[HandleError]
public class EmpleadoController : Controller
{
public ActionResult Index()
{
var empleados = GenerarEmpleados(25).ToList();
if (Request.IsAjaxRequest())
{
return Json(new {data = empleados, total = empleados.Count},JsonRequestBehavior.AllowGet);
}
return View();
}
private IEnumerable<empleado> GenerarEmpleados(int cantidad)
{
var nombres = new []{"Roberto", "Javier", "Ernesto", "Diego", "Julio", "Carlos"};
var apellidos = new[] {"Gonzalez", "Martinez", "Zepeda", "Perez", "Calderon"};
var cargos = new[] {"Gerente de operaciones", "Programador", "Administrador", "DBA", "Coordinador"};
var random = new Random();
for (int i = 0; i < cantidad; i++)
{
yield return new Empleado
{
Apellido = apellidos[random.Next(0, 4)],
Nombre = nombres[random.Next(0, 4)],
Cargo = cargos[random.Next(0, 4)],
Sueldo = random.Next(100, 5000),
};
}
}
}
public class Empleado
{
public string Nombre { get; set; }
public string Apellido { get; set; }
public decimal Sueldo { get; set; }
public string Cargo { get; set; }
}
Vamos a usar el mismo metodo “Index” para retornar nuestros datos, la unica diferencia es que si la peticion fue hecha a traves de AJAX, como es en el caso de ExtJS, entonces vamos a retornar JSON, de otra manera vamos a retornar la pagina para ser visualizada en el navegador, asi nos ahorramos estar creando nuevas acciones en el controlador.
Es hora de escribir un poco de javascript, primero vamos a crear un JsonStore de ExtJS, el JsonStore es como un Datasource que vamos a utilizar para cargar el Json que retornara nuestro metodo Index:
var empleadosStore = new Ext.data.JsonStore(
{
url: "/Empleado",
fields: ["Apellido","Nombre","Cargo","Sueldo"],
root: 'data'
});
var grid = new Ext.grid.GridPanel({
title: 'empleados',
store: empleadosStore,
height: 400,
colModel: new Ext.grid.ColumnModel({
columns: [{ header: 'Nombre', dataIndex: 'Nombre' },
{ header: 'Apellidos', dataIndex: 'Apellido' },
{ header: 'Cargo', dataIndex: 'Cargo' },
{ header: 'Sueldo', dataIndex: 'Sueldo', renderer: Ext.util.Format.usMoney}]
})
});
Ext.onReady(function(){
grid.render('empleados_grid');
empleadosStore.load();
});
Explicacion
Primero creamos un JsonStore, este es parecido a los objetos datasource asp.net, cualquier acceso a datos se tiene que hacer por medio de un objeto Store, en nuestro caso usamos un JsonStore ya que la informacion que accesamos esta en formato Json. Como parametros del constructor del JsonStore le mandamos un Hash con las propiedades que le queremos asignar. Especificamos que la URL para cargar los datos es “/Empleado”, la cual es la URL de la accion Index d emi controlador, recuerden que si la accion detecta en la peticion es AJAX regresa un arreglo JSON, el JsonStore hace todas sus peticiones por medio de AJAX. Pueden ver en firebug lo que retorna la accion:
En la propiedad “fields” especificamos las propiedades de mis objetos JSON, y la propiedad “root” sirve para especificar la propiedad del resultado de JSON que contiene mi lista de datos, en nuestro caso, el objeto JSON que regresamos contiene dos propiedades, una llamada “data” que contiene mis objetos, y otra llamada “total” que contiene la cantidad de objetos regresados.
Despues de crear el store ahora creamos un objeto de tipo “GridPanel” que vamos a utilizar para cargar nuestros datos. Asi como el objeto Store, al GridPanel tambien podemos enviarle las propiedades en un hash en el constructor, las propiedades mas importantes son “store” que especificar el DataStore de donde vamos a cargar los datos y la propiedad colModel donde especificamos las columnas del grid.
Al crear nuestras columnas la propiedad “dataIndex” especifica la propiedad del objeto que queremos mostrar.
Una ves tenemos creado el grid, tenemos que especificar el id de un div a donde vamos a renderizar el grid:
Ext.onReady(function(){
grid.render('empleados_grid');
empleadosStore.load();
});
El metodo onReady nos sirve para definicar una funcion que se va ejecutar al temrinarse de cargar el documento.
El metodo “load” de nuestro dataStore sirve para hacer la peticion y cargar la informacion.
Resultado final
Por alguna razon el css que traen las aplicacion MVC distorsiona el disenio del grid, si lo quitan se van a ver bien.
.
