From Learn About the Ext JavaScript Library

Contents 1 Abstract 2 Getting Started 2.1 Disclaimer 2.2 Example Code

Abstract

Generating a data Grid when the columns can not be predefined requires a different approach than just populating a standard predefined grid layout. I strongly recommend going through at least the basic Grid tutorials first to get a good basis on how grids in Ext.js work. The examples below include submitting a form, the contents of which will determine what columns are in the data returned. Perl will be used in examples of server side code and JSON will be used for formatting the response.

Getting Started

Disclaimer

 This tutorial is under construction. Currently it is just a dump of the code
 used in my initial trial project converting an existing app to use the
 Grid component. I will break up the code into sections, convert to CamelCase
 as is the standard usage in Ext examples and add explanatory text ASAP.
 
 Currently the code below works fine in a real application, with one major
 exception. The 'failure:' method in the 'Ext.Ajax.request' currently fires off
 every time if not commented out, causing the 'success:' method not to be called,
 even though the response is the same. With 'failure:' commented out everything
 works as planed. I will work to solve this problem before completing the tutorial.
 But I had so much trouble converting a grid to use dynamic columns as a novice to
 Ext.js I thought it might be useful to have even this much available to others as
 an example.

Example Code

var submit_report_request = function(e) {
    Ext.Ajax.request({
        form: 'report_form',
        text: 'Generating report...',
        success: function(result, request) {
            var jsonData = Ext.util.JSON.decode(result.responseText);
            build_results_grid(jsonData);
        }
        //failure: alert('Ajax.request failed')
    });
    if (e) { e.stopEvent(); }
} // submit_report_request
 
var set_run_report_button = function() {
    var buttons = Ext.select('button.run_report', true)
    Ext.each(buttons, function(element) {
        element.on('click', submit_report_request);
    })
}
Ext.onReady(set_run_report_button);
 
var parse_hash = function() {
    var rpt_hash = document.location.hash;
    if (rpt_hash.match(/run/)) {
        // set form values to match hash
        var form = $('report_form');
        var hash = rpt_hash.replace(/#run\?/,'');
        var params = hash.split('&');
        for (var i = 0; i < params.length; i++) {
            var pair = params[i].split('=');
            form[pair[0]].value = pair[1];
        }
        submit_report();
    }
}
Ext.onReady(parse_hash);
 
 
function build_results_grid (response) {
    // set up grid data store (ds)?
    grid_ui.set_ds(response.headers, response.rows);
 
    // column_model built from response.column_model
    grid_ui.set_column_model(response.column_model);
 
    // build grid
    grid_ui.init();
 
    // update location so reload/bookmark works
    var form_args = [$('performance_report_form').serialize()].join('&');
    document.location.hash = 'run?' + form_args;
 
    // hide form
    set_form_display('hide');
} // build the results grid
 
 
var grid_ui = function () {
    var grid;
    var column_model = false;
    var ds;
    var headers;
    var rows;
 
    function setup_data_source() {
        var col_names = new Array();
        for (var i = 0; i < headers.length; i++) {
            col_names.push({name: headers[i]});
        }
 
        ds = new Ext.data.Store({
            proxy:  new Ext.data.MemoryProxy(rows),
            reader: new Ext.data.ArrayReader({}, col_names)
        });
 
        ds.load();
    }
 
    function get_column_model() {
        if (!column_model) {
            alert('No column model defined yet');
        }
        return column_model;
    }
 
    function build_grid() {
        grid = new Ext.grid.Grid(
            'mygrid', 
            {
                ds: ds,
                cm: column_model,
                //autoSizeColumns: true,
                maxHeight: 600
            }
        );
        grid.render();
    }
 
    return {
        init: function () {
            setup_data_source();
            build_grid();
        },
 
        set_column_model: function(model) {
            column_model = new Ext.grid.ColumnModel(model);
        },
 
        set_ds: function(rpt_headers, rpt_rows) {
            // set ds somehow
            headers = rpt_headers;
            rows = rpt_rows;
        }
    } // return
}(); // grid UI