docs/source/TableGrid.html

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