text: /**
   * @class Ext.ux.grid.TransformGrid
   * @extends Ext.grid.Panel
   * A Grid which creates itself from an existing HTML table element.
   * @history
   * 2007-03-01 Original version by Nige "Animal" White
   * 2007-03-10 jvs Slightly refactored to reuse existing classes * @constructor
   * @param {String/HTMLElement/Ext.Element} table The table element from which this grid will be created -
   * The table MUST have some type of size defined for the grid to fill. The container will be
   * automatically set to position relative if it isn't already.
   * @param {Object} config A config object that sets properties on this grid and has two additional (optional)
   * properties: fields and columns which allow for customizing data fields and columns for this grid.
   */
  Ext.define('Ext.ux.grid.TransformGrid', {
      extend: 'Ext.grid.Panel',
      layout: 'fit',
      constructor: function(table, config) {
          config = Ext.apply({}, config);
          table = this.table = Ext.get(table);
      
          var configFields = config.fields || [], 
              configColumns = config.columns || [],
              fields = [],
              cols = [],
              ct = table.insertSibling(),
              headers = table.query("thead th"),
              i = 0,
              len = headers.length,
              data = table.dom,
              width,
              height,
              store,
              col,
              text,
              name;
      
          for (; i < len; ++i) {
              col = headers[i];
          
              text = col.innerHTML;
              name = 'tcol-' + i;
          
              fields.push(Ext.applyIf(configFields[i] || {}, {
                  name: name,
                  mapping: 'td:nth(' + (i + 1) + ')/@innerHTML'
              }));
          
              cols.push(Ext.applyIf(configColumns[i] || {}, {
                  text: text,
                  dataIndex: name,
                  width: col.offsetWidth,
                  tooltip: col.title,
                  sortable: true
              }));
          }
          
          if (config.width) {
              width = config.width;   
          } else {
              width = table.getWidth();
          }
          
          if (config.height) {
              height = config.height;
          }
      
          if (config.remove !== false) {
              // Don't use table.remove() as that destroys the row/cell data in the table in
              // IE6-7 so it cannot be read by the data reader.
              data.parentNode.removeChild(data);
          }
          
      
          Ext.applyIf(config, {
              store: {
                  data: data,
                  fields: fields,
                  proxy: {
                      type: 'memory',
                      reader: {
                          record: 'tbody tr',
                          type: 'xml'
                      }
                  }    
              },
              columns: cols,
              width: width,
              autoHeight: height ? false : true,
              height: height,
              el: ct
          });
          this.callParent([config]);    
      },
  
      onDestroy: function() {
          this.callParent();
          this.table.remove();
          delete this.table;
      }
  });