TableGrid.js 2.5 KB

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