Utilización de ExtJs con MVC ASP.NET 1

ExtJs es un framework javascript que permite desarrollar aplicaciones compatibles con los navegadores mas usados, a la vez que ofrece una serie de
controles muy fáciles de implementar, que comprenden gráficos, grillas, formularios, etc.
Es usado muy frecuentemente en ambiente Java pero, al ser totalmente javascript, puede ser usado en cualquier entonrno web, en este caso veremos
un simple ejemplo de uso con ASP.NET MVC 4 en pocos pasos:

1) Creación de un proyecto MVC e inclusión de las librerias ExtJs

Con Visual Studio creamos un nuevo proyecto MVC, que usaremos como base para nuestro ejemplo:

luego incluimos las librerias de ExtJs dentro la pàgina master.

 <script src="<%: Url.Content("~/Scripts/ExtJs/ext-all.js") %>" type="text/javascript"></script>

Ejecutando la aplicación, podemos comprobar si la inclusión de ExtJs està funcionando correctamente, para esto abrimos la consola javascript de nuestro navegador,
y escribimos

 Ext.getVersion('core').version
  

tiene que mostrar la version de ExtJs si ha sido instalada correctamente.

2) Generación de datos en C#

Creamos una nueva clase (Libro.cs) que usaremos como modelo.

namespace MvcConExtJs.Models
{
    public class Libro{

        public string Codigo {get;set;}
        public string Titulo {get;set;}
        public string Autor {get;set;}
        public string Idioma { get; set; }
        public decimal Precio {get;set;}
    }
}

Abrimos el archivo HomeController.js y agregamos un nuevo método, en modo que retorne datos en formato JSON. Estos datos los utilizaremos dentro
una grilla para ver las funcionalidades de ExtJs.

 public JsonResult GetBooks()
        {

            Libro libro1 = new Libro { Titulo = "En un rincón del alma", Autor = "Antonia de J. Corrales", Codigo = "9788415420231", Idioma = "Español", Precio = 15.00M };
            Libro libro2 = new Libro { Titulo = "La casa de Riverton", Autor = "Kate Morton", Codigo = "9788466325066", Idioma = "Español", Precio = 10.99M };
            Libro libro3 = new Libro { Titulo = "Dime quién soy", Autor = "Julia Navarro", Codigo = "9788499087566", Idioma = "Español", Precio = 21.00M };
            Libro libro4 = new Libro { Titulo = "La caida de los gigantes", Autor = "Ken Follet", Codigo = "9788499893570", Idioma = "Español", Precio = 12.95M };
            Libro libro5 = new Libro { Titulo = "El tiempo entre costuras", Autor = "Maria Dueñas", Codigo = "9788499981833", Idioma = "Español", Precio = 13.77M };

            List<Libro> libros = new List<Libro>();

            libros.Add(libro1);
            libros.Add(libro2);
            libros.Add(libro3);
            libros.Add(libro4);
            libros.Add(libro5);

            return Json(new { data = libros }, JsonRequestBehavior.AllowGet);
        }

3) Implementación ExtJs

En lo que respecta la implementación especifica de ExtJs, basta pegar este código dentro de la vista:

 <div id="contenedor">
    </div>
    <script type="text/javascript">

        Ext.define('Myapp.model.Libro', {
            extend: 'Ext.data.Model',
            fields: [
                       { name: 'Codigo', type: 'string' },
                       { name: 'Titulo', type: 'string' },
                       { name: 'Autor', type: 'string' },
                       { name: 'Idioma', type: 'string' },
                       { name: 'Precio', type: 'string' },
                   ]
        });

        var store = new Ext.data.Store({
            extend: 'Ext.data.Store',
            requires: ['Myapp.model.Libro'],
            model: 'Myapp.model.Libro',
            autoLoad: true,
            autoSync: false,
            proxy: {
                type: 'ajax',
                api: {
                    read: 'Home/GetBooks'
                },
                appendId: false,
                batchActions: true,
                reader: {
                    type: 'json',
                    root: 'data',
                    messageProperty: 'message',
                    successProperty: 'success',
                    totalProperty: 'total'
                },
                writer: {
                    type: 'json',
                    allowSingle: false
                }
            }
        });

        $(document).ready(function () {

            var grid = Ext.create('Ext.grid.Panel', {
                store: store,
                title: 'Libros',
                requires: 'MyApp.model.Libro',
                stateful: true,
                collapsible: true,
                multiSelect: true,
                stateId: 'stateGrid',
                columns: [
                        { header: 'Codigo', dataIndex: 'Codigo'},
                        { header: 'Titulo', dataIndex: 'Titulo' },
                        { header: 'Autor', dataIndex: 'Autor' },
                        { header: 'Idioma', dataIndex: 'Idioma' },
                        { header: 'Precio', dataIndex: 'Precio' }
                    ],
                renderTo: 'contenedor',
                width: 700,
                height: 400
            });

            grid.getStore().load();
        });

    </script>

Lanzando en debugging el proyecto, podemos verificar si la grilla funciona correctamente:

Desde este enlace se puede descargar el proyecto completo