examples/grid/from-markup.js

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