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

ExtJS/Sencha


Наткнулся на днях на интересный пример, как сделать 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:extjsgrid
Hubs: ExtJS/Sencha
+1
1.4k 7
Comments 5

Popular right now

.net developer
from 100,000 to 200,000 ₽БАРС ГрупКазаньRemote job
Senior Frontend Developer
from 200,000 ₽AaplyRemote job
Fullstack Developer (Laravel + Vue)
from 120,000 to 160,000 ₽FlexaМоскваRemote job
Автотестировщик (Java)
from 170,000 ₽Банк «Открытие»Москва
Junior Full Stack Developer (JavaScript)
from 70,000 to 90,000 ₽careerspaceRemote job