Gana hasta un 30% más con tu trabajo, obtén el control de tu carrera y lleva una vida más feliz, placentera y saludable.
Mario Raúl Pérez, Servicios de Capacitación Profesional.

Grids en ExtJS 4

La Grilla es una de las piezas centrales de Ext JS. Es un componente muy versátil que proporciona una gran manera de ver muchos datos a la vez, con el formato exactamente como usted lo necesite. Con Ext JS 4 hemos reacondicionado la grilla, por lo que es más rápida, más ligera y más fácil de personalizar.

Componentes de Grillas

Artículo original: Grid Components

Renderización inteligente

La Grilla Ext JS 3 funciona fantásticamente bien, pero se necesita del “mínimo común denominador” para dar soporte característica ricas por la continua la generación del marcado de todo lo necesario de todas las características de Grilla (que es excesivamente pesada en la mayoría de los casos). En Ext JS 4, la grilla por defecto tiene un marcado muy ligero, y características adicionales específicas de marcado sólo se representan cuando los desarrolladores activan las diferentes características . Este es un gran impulso tanto para la velocidad de representación de páginas como para el rendimiento de Grilla en general.

Diseño estandarizado

Junto con una secuencia de representación más inteligente, muchas partes de la nueva grilla se han convertido en componentes adecuados e integrados en el sistema de gestión de diseño estándar en lugar de confiar en marcados y CSS internos. Esto nos permite unificar el proceso de renderizado de la grilla con el resto de la estructura, manteniendo al mismo tiempo una experiencia de interfaz de usuario con precisión de píxel.

DataView

El GridView nuevo en Ext JS 4 amplía la clase DataView estándar. Esto no sólo minimiza la duplicación de código interno, sino que también hace que la nueva grilla sea aún más fácil de personalizar. Porque se extiende DataView, la nueva red es también capaz de aprovechar los mismos modelos de selección como cualquier otra vista, incluso la selección no contigua a través de la navegación mediante teclado.

Soporte de Caracteristicas

En Ext JS 3, era fácil de añadir nuevas funcionalidades a las grillas, pero no había una estrategia única para hacerlo. Muchas características nuevas, se adjuntaron como plugins, pero algunas fueron proporcionados por subclases. Esto hace muy difícil (si no imposible) combinar ciertas características con facilidad.

Ext JS 4 incluye una nueva clase base de Grilla  llamada Ext.grid.Feature que proporciona la base para la creación de características de grilla opcionales extremadamente flexibles. Las plantillas de Grilla subyacentes pueden ser modificado por cualquier clase de características con el fin de decorar o mutar del marcado esa vista que la grilla genera. Características proporcionan una poderosa alternativa a la antigua subclasificación de GridView, ya que hace que sea fácil de mezclar y combinar características compatibles. Algunos ejemplos de las características de la nueva red son RowWrap, RowBody and Grouping.

Scroll Virtual

La Grilla de ExtJS 4 ahora soporta de forma nativa el búffering de sus datos durante la representación, proporcionando unas vistas virtuales, cargables bajo demanda, de sus datos. Las grillas ahora soportan fácilmente cientos o incluso miles de registros sin paginación, lo que significa una mejora enorme en la manipulación de datos sobre la Grilla de Ext JS 3.

Mejoras al Editar

En Ext JS 3, los desarrolladores tuvieron que utilizar la clase EditorGrid especializada para facilitar una grilla modificable, lo que limita su flexibilidad. En Ext JS 4, ahora hay un plugin de edición que se pueden aplicar a cualquier instancia de Grilla, lo que es totalmente reutilizable a través de todas las grillas. Además, la extensión popular RowEditor de Ext JS 3 ha sido promovida a un componente de primera clase y apoyado plenamente en el framework Ext JS 4.

Un Ejemplo

Aquí está la configuración de una grilla básica con agrupamiento en Ext JS 4. Es imposible cubrir todas las nuevas funcionalidades en un solo ejemplo, pero esto debe darle una buena muestra de la nueva grilla en la acción. Como puede ver, la configuración es muy similar a la de Ext JS 3, pero la funcionalidad de agrupación es ahora una característica de configuración simple, en lugar de una instancia completa GroupingView personalizada como se requiere en Ext JS 3.

Esto es sólo un ejemplo de la nueva flexibilidad en Ext JS 4. Además, la agrupación está apoyado directamente en el Store estándar, por lo que un GroupingStore separado ya no es necesario.

Ext.onReady(function() {
    Ext.define('Teams', {
        extend: 'Ext.data.Model',
        fields: ['name', 'sport']
    });

    var teamStore = new Ext.data.Store({
        model: 'Teams',
        sorters: ['sport','name'],
        groupField: 'sport',
        data: [
            { name: 'Aaron', sport: 'Table Tennis' },
            { name: 'Aaron', sport: 'Football' },
            { name: 'Abe', sport: 'Basketball' },
            { name: 'Tommy', sport: 'Football' },
            { name: 'Tommy', sport: 'Basketball' },
            { name: 'Jamie', sport: 'Table Tennis' },
            { name: 'Brian', sport: 'Basketball' },
            { name: 'Brian', sport: 'Table Tennis' }
        ]
    });

    var grid = new Ext.grid.Panel({
        renderTo: Ext.getBody(),
        store: teamStore,
        width: 400,
        height: 300,
        title: 'Sports Teams',
        features: [{
            ftype: 'grouping'
        }],
        columns: [{
            text: 'Name',
            flex: 1,
            dataIndex: 'name'
        },{
            text: 'Sport',
            dataIndex: 'sport'
        }]
    });
});

Artículos externos

Artículos de otros autores o colegas que pudieran serle útiles:

ExtJS 4.0 Documentation from Sencha , versión en español por Mario Pérez.