90 lines
No EOL
2.6 KiB
JavaScript
90 lines
No EOL
2.6 KiB
JavaScript
/*
|
|
* Ext JS Library 1.0.1
|
|
* Copyright(c) 2006-2007, Ext JS, LLC.
|
|
* licensing@extjs.com
|
|
*
|
|
* http://www.extjs.com/license
|
|
*/
|
|
|
|
Ext.onReady(function() {
|
|
var btn = Ext.get("create-grid");
|
|
btn.on("click", function(){
|
|
btn.dom.disabled = true;
|
|
|
|
// create the grid
|
|
var grid = new Ext.grid.TableGrid("the-table");
|
|
grid.render();
|
|
|
|
}, false, {single:true}); // run once
|
|
});
|
|
|
|
/**
|
|
* @class Ext.grid.TableGrid
|
|
* @extends Ext.grid.Grid
|
|
* A Grid which creates itself from an existing HTML table element.
|
|
* @constructor
|
|
* @param {String/HTMLElement/Ext.Element} table The table element from which this grid will be created -
|
|
* The table MUST have some type of size defined for the grid to fill. The container will be
|
|
* automatically set to position relative if it isn't already.
|
|
* @param {Object} config A config object that sets properties on this grid and has two additional (optional)
|
|
* properties: fields and columns which allow for customizing data fields and columns for this grid.
|
|
* @history
|
|
* 2007-03-01 Original version by Nige "Animal" White
|
|
* 2007-03-10 jvs Slightly refactored to reuse existing classes
|
|
*/
|
|
Ext.grid.TableGrid = function(table, config) {
|
|
config = config || {};
|
|
var cf = config.fields || [], ch = config.columns || [];
|
|
table = Ext.get(table);
|
|
|
|
var ct = table.insertSibling();
|
|
|
|
var fields = [], cols = [];
|
|
var headers = table.query("thead th");
|
|
for (var i = 0, h; h = headers[i]; i++) {
|
|
var text = h.innerHTML;
|
|
var name = 'tcol-'+i;
|
|
|
|
fields.push(Ext.applyIf(cf[i] || {}, {
|
|
name: name,
|
|
mapping: 'td:nth('+(i+1)+')/@innerHTML'
|
|
}));
|
|
|
|
cols.push(Ext.applyIf(ch[i] || {}, {
|
|
'header': text,
|
|
'dataIndex': name,
|
|
'width': h.offsetWidth,
|
|
'tooltip': h.title,
|
|
'sortable': true
|
|
}));
|
|
}
|
|
|
|
var ds = new Ext.data.Store({
|
|
reader: new Ext.data.XmlReader({
|
|
record:'tbody tr'
|
|
}, fields)
|
|
});
|
|
|
|
ds.loadData(table.dom);
|
|
|
|
var cm = new Ext.grid.ColumnModel(cols);
|
|
|
|
if(config.width || config.height){
|
|
ct.setSize(config.width || 'auto', config.height || 'auto');
|
|
}
|
|
if(config.remove !== false){
|
|
table.remove();
|
|
}
|
|
|
|
Ext.grid.TableGrid.superclass.constructor.call(this, ct,
|
|
Ext.applyIf(config, {
|
|
'ds': ds,
|
|
'cm': cm,
|
|
'sm': new Ext.grid.RowSelectionModel(),
|
|
autoHeight:true,
|
|
autoWidth:true
|
|
}
|
|
));
|
|
};
|
|
|
|
Ext.extend(Ext.grid.TableGrid, Ext.grid.Grid); |