examples/ux/TableGrid.js

   1 /*!
   2  * Ext JS Library 3.3.1
   3  * Copyright(c) 2006-2010 Sencha Inc.
   4  * licensing@sencha.com
   5  * http://www.sencha.com/license
   6  */
   7 Ext.ns('Ext.ux.grid');
   8
   9 /**
  10  * @class Ext.ux.grid.TableGrid
  11  * @extends Ext.grid.GridPanel
  12  * A Grid which creates itself from an existing HTML table element.
  13  * @history
  14  * 2007-03-01 Original version by Nige "Animal" White
  15  * 2007-03-10 jvs Slightly refactored to reuse existing classes * @constructor
  16  * @param {String/HTMLElement/Ext.Element} table The table element from which this grid will be created -
  17  * The table MUST have some type of size defined for the grid to fill. The container will be
  18  * automatically set to position relative if it isn't already.
  19  * @param {Object} config A config object that sets properties on this grid and has two additional (optional)
  20  * properties: fields and columns which allow for customizing data fields and columns for this grid.
  21  */
  22 Ext.ux.grid.TableGrid = function(table, config){
  23     config = config ||
  24     {};
  25     Ext.apply(this, config);
  26     var cf = config.fields || [], ch = config.columns || [];
  27     table = Ext.get(table);
  28
  29     var ct = table.insertSibling();
  30
  31     var fields = [], cols = [];
  32     var headers = table.query("thead th");
  33     for (var i = 0, h; h = headers[i]; i++) {
  34         var text = h.innerHTML;
  35         var name = 'tcol-' + i;
  36
  37         fields.push(Ext.applyIf(cf[i] ||
  38         {}, {
  39             name: name,
  40             mapping: 'td:nth(' + (i + 1) + ')/@innerHTML'
  41         }));
  42
  43         cols.push(Ext.applyIf(ch[i] ||
  44         {}, {
  45             'header': text,
  46             'dataIndex': name,
  47             'width': h.offsetWidth,
  48             'tooltip': h.title,
  49             'sortable': true
  50         }));
  51     }
  52
  53     var ds = new Ext.data.Store({
  54         reader: new Ext.data.XmlReader({
  55             record: 'tbody tr'
  56         }, fields)
  57     });
  58
  59     ds.loadData(table.dom);
  60
  61     var cm = new Ext.grid.ColumnModel(cols);
  62
  63     if (config.width || config.height) {
  64         ct.setSize(config.width || 'auto', config.height || 'auto');
  65     }
  66     else {
  67         ct.setWidth(table.getWidth());
  68     }
  69
  70     if (config.remove !== false) {
  71         table.remove();
  72     }
  73
  74     Ext.applyIf(this, {
  75         'ds': ds,
  76         'cm': cm,
  77         'sm': new Ext.grid.RowSelectionModel(),
  78         autoHeight: true,
  79         autoWidth: false
  80     });
  81     Ext.ux.grid.TableGrid.superclass.constructor.call(this, ct, {});
  82 };
  83
  84 Ext.extend(Ext.ux.grid.TableGrid, Ext.grid.GridPanel);
  85
  86 //backwards compat
  87 Ext.grid.TableGrid = Ext.ux.grid.TableGrid;