Pull to refresh

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

Reading time 1 min
Views 1.6K


Наткнулся на днях на интересный пример, как сделать 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» можно здесь
Tags:
Hubs:
+1
Comments 5
Comments Comments 5

Articles