ExtJs: Ext.Grid from an unformatted HTML table

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

    Barney rubble32Male
    Fred flintstone33Male
    Betty rubble32Female
    Bamm bamm2Male

    Then create a button:

    We got the 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 a 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 clicking the button: Download the demo "HTML 2 Ext.Grid" here

    Also popular now: