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