examples/ux/grid/TransformGrid.js

   1 /**
   2  * @class Ext.ux.grid.TransformGrid
   3  * @extends Ext.grid.Panel
   4  * A Grid which creates itself from an existing HTML table element.
   5  * @history
   6  * 2007-03-01 Original version by Nige "Animal" White
   7  * 2007-03-10 jvs Slightly refactored to reuse existing classes * @constructor
   8  * @param {String/HTMLElement/Ext.Element} table The table element from which this grid will be created -
   9  * The table MUST have some type of size defined for the grid to fill. The container will be
  10  * automatically set to position relative if it isn't already.
  11  * @param {Object} config A config object that sets properties on this grid and has two additional (optional)
  12  * properties: fields and columns which allow for customizing data fields and columns for this grid.
  13  */
  14 Ext.define('Ext.ux.grid.TransformGrid', {
  15     extend: 'Ext.grid.Panel',
  16
  17     constructor: function(table, config) {
  18         config = Ext.apply({}, config);
  19         table = this.table = Ext.get(table);
  20
  21         var configFields = config.fields || [],
  22             configColumns = config.columns || [],
  23             fields = [],
  24             cols = [],
  25             ct = table.insertSibling(),
  26             headers = table.query("thead th"),
  27             i = 0,
  28             len = headers.length,
  29             data = table.dom,
  30             width,
  31             height,
  32             store,
  33             col,
  34             text,
  35             name;
  36
  37         for (; i < len; ++i) {
  38             col = headers[i];
  39
  40             text = col.innerHTML;
  41             name = 'tcol-' + i;
  42
  43             fields.push(Ext.applyIf(configFields[i] || {}, {
  44                 name: name,
  45                 mapping: 'td:nth(' + (i + 1) + ')/@innerHTML'
  46             }));
  47
  48             cols.push(Ext.applyIf(configColumns[i] || {}, {
  49                 text: text,
  50                 dataIndex: name,
  51                 width: col.offsetWidth,
  52                 tooltip: col.title,
  53                 sortable: true
  54             }));
  55         }
  56
  57         if (config.width) {
  58             width = config.width;
  59         } else {
  60             width = table.getWidth();
  61         }
  62
  63         if (config.height) {
  64             height = config.height;
  65         }
  66
  67         if (config.remove !== false) {
  68             // Don't use table.remove() as that destroys the row/cell data in the table in
  69             // IE6-7 so it cannot be read by the data reader.
  70             data.parentNode.removeChild(data);
  71         }
  72
  73
  74         Ext.applyIf(config, {
  75             store: {
  76                 data: data,
  77                 fields: fields,
  78                 proxy: {
  79                     type: 'memory',
  80                     reader: {
  81                         record: 'tbody tr',
  82                         type: 'xml'
  83                     }
  84                 }
  85             },
  86             columns: cols,
  87             width: width,
  88             autoHeight: height ? false : true,
  89             height: height,
  90             el: ct
  91         });
  92         this.callParent([config]);
  93     },
  94
  95     onDestroy: function() {
  96         this.callParent();
  97         this.table.remove();
  98         delete this.table;
  99     }
 100 });