git.roojs.org Git - roojs1/blob - examples/grid/from-markup.js

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