examples/docs/source/TableGrid.html

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