ExtJs: Ext.Grid из неотформатированной HTML таблицы

Наткнулся на днях на интересный пример, как сделать Ext.Grid из неотформатированной таблички. Делается все буквально одной строчкой. Для начала создадим HTML таблицу:

Barney Rubble	32	Male
Fred Flintstone	33	Male
Betty Rubble	32	Female
Pebbles	1	Female
Bamm Bamm	2	Male

Затем создаем кнопку:

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

У нас получилось



Сам код кнопки:

/*!
 * Ext JS Library 3.0+
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
Ext.onReady(function(){
    // находим кнопку
    var btn = Ext.get("create-grid");

    // обработчик нажатия на кнопку
    btn.on("click", function(){
        btn.dom.disabled = true;

        // создаем таблицу
        var grid = new Ext.ux.grid.TableGrid("the-table", {stripeRows: true});
        grid.render(); // показываем таблицу
    }, false, {
        single: true
    }); // выполнять только один раз
});

Результат после нажатия на кнопку:



Скачать демку «HTML 2 Ext.Grid» можно здесь