TableGrid.js
上传用户:shuoshiled
上传日期:2018-01-28
资源大小:10124k
文件大小:3k
源码类别:

中间件编程

开发平台:

JavaScript

  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.     
  28.     var ct = table.insertSibling();
  29.     
  30.     var fields = [], cols = [];
  31.     var headers = table.query("thead th");
  32.     for (var i = 0, h; h = headers[i]; i++) {
  33.         var text = h.innerHTML;
  34.         var name = 'tcol-' + i;
  35.         
  36.         fields.push(Ext.applyIf(cf[i] ||
  37.         {}, {
  38.             name: name,
  39.             mapping: 'td:nth(' + (i + 1) + ')/@innerHTML'
  40.         }));
  41.         
  42.         cols.push(Ext.applyIf(ch[i] ||
  43.         {}, {
  44.             'header': text,
  45.             'dataIndex': name,
  46.             'width': h.offsetWidth,
  47.             'tooltip': h.title,
  48.             'sortable': true
  49.         }));
  50.     }
  51.     
  52.     var ds = new Ext.data.Store({
  53.         reader: new Ext.data.XmlReader({
  54.             record: 'tbody tr'
  55.         }, fields)
  56.     });
  57.     
  58.     ds.loadData(table.dom);
  59.     
  60.     var cm = new Ext.grid.ColumnModel(cols);
  61.     
  62.     if (config.width || config.height) {
  63.         ct.setSize(config.width || 'auto', config.height || 'auto');
  64.     }
  65.     else {
  66.         ct.setWidth(table.getWidth());
  67.     }
  68.     
  69.     if (config.remove !== false) {
  70.         table.remove();
  71.     }
  72.     
  73.     Ext.applyIf(this, {
  74.         'ds': ds,
  75.         'cm': cm,
  76.         'sm': new Ext.grid.RowSelectionModel(),
  77.         autoHeight: true,
  78.         autoWidth: false
  79.     });
  80.     Ext.ux.grid.TableGrid.superclass.constructor.call(this, ct, {});
  81. };
  82. Ext.extend(Ext.ux.grid.TableGrid, Ext.grid.GridPanel);
  83. //backwards compat
  84. Ext.grid.TableGrid = Ext.ux.grid.TableGrid;