ExtJs: Ext.Grid from unformatted HTML table

The other day I came across an interesting example of how to make Ext.Grid from an unformatted tablet. Everything is done literally in one line. First, create an HTML table:

Barney ruble	32	Male
Fred flintstone	33	Male
Betty ruble	32	Female
Pebbles	one	Female
Bamm bamm	2	Male

Then create a button:
')

  <button id = "create-grid" type = "button"> Create grid </ button> 

We made it



Button code itself:

  / *!
  * Ext JS Library 3.0+
  * Copyright (c) 2006-2009 Ext JS, LLC
  * licensing@extjs.com
  * http://www.extjs.com/license
  * /
 Ext.onReady (function () {
     // find the button
     var btn = Ext.get ("create-grid");

     // button click handler
     btn.on ("click", function () {
         btn.dom.disabled = true;

         // create table
         var grid = new Ext.ux.grid.TableGrid ("the-table", {stripeRows: true});
         grid.render ();  // show the table
     }, false, {
         single: true
     });  // execute only once
 }); 

The result after pressing the button:



Download the demo "HTML 2 Ext.Grid" here