Upgrade to ExtJS 3.3.1 - Released 11/30/2010
[extjs.git] / 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;