MiamiCoder

Recientemente he estado evaluando la impresionante biblioteca ExtJS. Analizando cómo nuestros productos pudieran beneficiarce con el uso de ExtJS, uno de los retos más importantes que he encontrado es el hecho que nuestras "grids", o "grillas" - perdonen los errores de traducción :) - son dinámicas. Y digo dinámicas en el sentido de que las propriedades de las columnas - número de columnas, tipos de datos, formatos, etc... - solamente son conocidas en tiempo de ejecución.

Aquí les demuestro una de las posibles soluciones que permiten enviar los modelos de columnas, así como las definiciones de sus bancos de datos, desde el servidor hacia el cliente. De esta manera, las columnas para las grillas pueden ser controladas por el código que se ejecuta en el servidor.

Por cada página que contiene grillas, la solución consiste en dos pasos. El primero es una llamada AJAX para adquirir las definiciones de las columnas para las grillas. El segundo es la llamada para obtener la información que las grillas mostrarán.

A pesar de que en mi ejemplo el código en el servidor está escrito en C#, el concepto es válido para cualquier lenguaje.

En lo que respecta a las rutinas que se ejecutan dentro de la página web, lo más importante es ordenar las llamadas AJAX de manera que la información a mostrar se obtenga solamente después que las columnas de la grilla fueron correctamente creadas.

La primera llamada que llega al servidor es manejada por la rutina GetGridSettings:

   1:  private string GetGridSettings()

   2:      {

   3:   

   4:          StringBuilder sb = new StringBuilder();

   5:   

   6:          // Grid name

   7:          sb.Append("[['myGrid'],[");

   8:          // Grid columns

   9:          sb.Append("{id:'firstname',header: 'First Name', width: 200, sortable: true, dataIndex: 'first_name'},");

  10:          sb.Append("{id: 'lastname', header: 'Last Name', width: 200, sortable: true, dataIndex: 'last_name'},");

  11:          sb.Append("{header: 'Email Address', width: 200, sortable: true, dataIndex: 'email_address'}");

  12:          sb.Append("],");

  13:          // Data Store fields

  14:          sb.Append("[{name: 'first_name'},{name: 'last_name'},{name:'email_address'}]");        

  15:          sb.Append("]");

  16:   

  17:          return sb.ToString();

  18:      }

GetGridSettings es donde se construyen el modelo para las columnas y los campos del banco de datos.

La segunda llamada es manejada por la rutina GetGridData, que simplemente adquiere la información que la grilla va a mostrar:

   1:      private string GetGridData()

   2:      {

   3:          StringBuilder sb = new StringBuilder();

   4:          int rowCount = 50;

   5:          

   6:          sb.Append("{rCnt:" + rowCount.ToString() + ",rows:[");

   7:   

   8:          for (int i = 0; i < rowCount; i++)

   9:          {

  10:              sb.Append("{'first_name':'John','last_name':'Doe" + i.ToString() + "','email_address':'JohnDoe" + i.ToString() + "@gmail.com'},");

  11:          }

  12:   

  13:          sb.Append("]}");

  14:   

  15:          return sb.Replace(",]}","]}").ToString();   // Remove the extra comma before sending the data.

  16:      }

Bájate el ejemplo como un projecto de Visual Studio: DynamicGrid.rar (528.43 kb)

Noticia: Leyendo en el fórum de ExtJS encontré que existe una extensión para el GridPanel que puede ayudar con el reto del que hablo en este artículo.