Dynamic grid columns?

[jayantkolekar]

Thank you very much for your help.

[Judy]

[FONT='Verdana','sans-serif']I like the dynamic grid function. It basically works. But, if I am rendering it into a window container, there is an issue with scope chain. Basically, if I deem the store which generates the grid in the scope that above the window (like if I use a button to put window renderer on button click event), it works - because the grid was already fulfilled and just waiting to be rendered into a container. But, if I put window in the higher scope chain it would not. [/FONT]

[FONT='Verdana','sans-serif']I understand why this is happening (although I may have failed to articulate it clearly). I am just wondering if anyone has a suggestion on how to have the grid refer to store's property instead of having it encapsulated within the store event. I could not figure it out.[/FONT]

[sambar]

I get a H is null error, any suggestions ?

[kishorebondada]

Hello spextjs,

Did you manage to develop a DynamicXMLReader too ? Would be very useful for my problem.

Atleast, any pointers/suggestions you would offer, if i were building one ?

[stedav]

Thanks for this, but I'm getting an annoying error when I am using:

 new Ext.grid.DynamicColumnModel(ds)' 

..as the column model attribute for my grid. However, Firebug is telling me off its showing the following script error:

Ext.grid.DynamicColumnModel is not a constructor

I've followed your code almost to the letter (swapping out variable names obviously), but to no avail. The Constructor to my grid looks like this: (# beign a place holder for my actual names which are company based hence I wish not show them).

var #name = new Ext.grid.EditorGridPanel
    (
        {
                id:'#id',
                store:#ds,
                plain: true,
                colModel:new Ext.grid.DynamicColumnModel(#ds), //firebug error here
                autoScroll:true,
                stripeRows :true,
                autoExpandColumn:'#colname',
                width: '70%'
        }

    );

]I'm probably missing something plainly obvious here, but any suggestions?

[jtpacheco]

The problem is that Ext.grid.DynamicColumnModel(obj) no longer exists in Ext 3.x, so you'll never be able to use that function. Currently I have no idea how to get grid columns loaded on the fly. My page is used for running queries to a Solr db, and displays the results in a grid. Current, it works for a set of data that I know to be there, and therefore is correct for only that query term. However, if I query other things, it obviously doesn't show up.

I'm not sure how to go about getting this done, as a lot of the forum suggestions are outdated (like this). The most I've thought of is to pass the column data with the JSON returned from query, but even then I don't know how to load that up to the column fields. I'm still tinkering with it, and eventually I'll find something, I'm sure...

Thanks for this, but I'm getting an annoying error when I am using:

 new Ext.grid.DynamicColumnModel(ds)' 

..as the column model attribute for my grid. However, Firebug is telling me off its showing the following script error:

I've followed your code almost to the letter (swapping out variable names obviously), but to no avail. The Constructor to my grid looks like this: (# beign a place holder for my actual names which are company based hence I wish not show them).

var #name = new Ext.grid.EditorGridPanel
    (
        {
                id:'#id',
                store:#ds,
                plain: true,
                colModel:new Ext.grid.DynamicColumnModel(#ds), //firebug error here
                autoScroll:true,
                stripeRows :true,
                autoExpandColumn:'#colname',
                width: '70%'
        }

    );

]I'm probably missing something plainly obvious here, but any suggestions?

[djoo]

ExtJs forum volunteer. No official connection to the Ext Company. I do not speak for them.
ExtJs consultancy offered. £ 50/hour. Evenings+weekends. animal.software@btinternet.com

Search the forum: http://www.google.com/coop/cse?cx=01...%3Az7of1ufqccu
Read the docs too: http://extjs.com/deploy/dev/docs/
See Saki's samples: http://examples.extjs.eu/
Build your own Ext: http://extjs.com/products/extjs/build/
Scope: http://extjs.com/forum/showthread.ph...642#post257642

[kalyan1230]

I need small help in the below mentioned code.

for (var i = 0; i < fields.keys.length; i++)
{
var fieldName = fields.keys[i];
var field = recordType.getField(fieldName);
cols[i] = {header: field.name, dataIndex: field.name, width:300};
}

I need Sorting on the column so i have added sortable:true, but the sorting is not working.

Can u please help me out for Sorting in DynamicColumnModel

Here's what I came up with:

Dynamic Json Reader: this will read whatever data comes back from the JSON call. It doesn't take a record definition because it builds it on the fly. Unfortunately it only has any record information *after* the JSON call has completed, so you can't simply pass it into a Grid, etc. because it won't be initialized at that time.

Ext.data.DynamicJsonReader = function(config){
    Ext.data.DynamicJsonReader.superclass.constructor.call(this, config, []);
};
Ext.extend(Ext.data.DynamicJsonReader, Ext.data.JsonReader, {
    getRecordType : function(data) {
        var i = 0, arr = [];
        for (var name in data[0]) { arr[i++] = name; } // is there a built-in to do this?
        
        this.recordType = Ext.data.Record.create(arr);
        return this.recordType;
        },
        
    readRecords : function(o){ // this is just the same as base class, with call to getRecordType injected
        this.jsonData = o;
        var s = this.meta;
        var sid = s.id;
        
        var totalRecords = 0;
        if(s.totalProperty){
            var v = parseInt(eval("o." + s.totalProperty), 10);
            if(!isNaN(v)){
                totalRecords = v;
            }
        }
        var root = s.root ? eval("o." + s.root) : o;
        
        var recordType = this.getRecordType(root);
        var fields = recordType.prototype.fields;
        
        var records = [];
        for(var i = 0; i < root.length; i++){
            var n = root[i];
            var values = {};
            var id = (n[sid] !== undefined && n[sid] !== "" ? n[sid] : null);
            for(var j = 0, jlen = fields.length; j < jlen; j++){
                var f = fields.items[j];
                var map = f.mapping || f.name;
                var v = n[map] !== undefined ? n[map] : f.defaultValue;
                v = f.convert(v);
                values[f.name] = v;
            }
            var record = new recordType(values, id);
            record.json = n;
            records[records.length] = record;
        }
        return {
            records : records,
            totalRecords : totalRecords || records.length
        };
    }
});

DynamicColumnModel: this takes a Store as a parameter, and from that it will build a default ColumnModel where all the fields are included and have width: 300.

Ext.grid.DynamicColumnModel = function(store){
    var cols = [];
    var recordType = store.recordType;
    var fields = recordType.prototype.fields;
    
    for (var i = 0; i < fields.keys.length; i++)
    {
        var fieldName = fields.keys[i];
        var field = recordType.getField(fieldName);
        cols[i] = {header: field.name, dataIndex: field.name, width:300};
    }
    Ext.grid.DynamicColumnModel.superclass.constructor.call(this, cols);
};
Ext.extend(Ext.grid.DynamicColumnModel, Ext.grid.ColumnModel, {});

Here's how I use it -

function showGrid(container, url)
{
    // create the Data Store
    var ds = new Ext.data.Store({
        proxy: new Ext.data.HttpProxy({url: url}),
        reader: new Ext.data.DynamicJsonReader({root: '...my root, yours will be different...'}),
        remoteSort: true
        });
    ds.on('load', function() {
        // Reset the Store's recordType
        ds.recordType = ds.reader.recordType;
        ds.fields = ds.recordType.prototype.fields;

        // Create the grid
        var grid = new Ext.grid.Grid(container, {
           ds: ds,
           cm: new Ext.grid.DynamicColumnModel(ds),
           selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
           enableColLock:true
        });
           
        // render it
        grid.render();
    });
    ds.load();
}

I haven't really put it through its paces yet but it seems to work for whatever JSON calls I try. If this were more generic I'd want to add some things like:
* Some way to provide column widths and types for known columns - merge with the unknowns. Maybe a callback function of some sort.
* A better way to declare this type of grid that has to wait until the data has been fetched before rendering.
* A DynamicXmlReader to match the JSON reader
* etc.

Note if Jack reads this: the DynamicJsonReader code could be even smaller if you adopt the change I made to the readRecords() method...

Steve

[k0smita]

To get DynamicJsonReader working I had to add two more lines to getRecordType (to call buildExtractors). Now the current version looks like that:

Ext.ns('Ext.data.DynamicJsonReader');

Ext.data.DynamicJsonReader = function(config)
{
    Ext.data.DynamicJsonReader.superclass.constructor.call(this, config, []);
};

Ext.extend(Ext.data.DynamicJsonReader, Ext.data.JsonReader, {
    /**
     * Create Record automatically based on json data
     * Private, called by readRecords()
     * @param {Object} data Json data
     */
    getRecordType: function(data) {
        var i = 0, arr = [];

        for (var name in data[0]) { arr[i++] = name; } // is there a built-in to do this?

        this.recordType = Ext.data.Record.create(arr);
        
        this.ef = false;
        this.buildExtractors();
        
        return this.recordType;
    },
    
    /**
     * Create a data block containing Ext.data.Records from a JSON object.
     * @param {Object} o An object which contains an Array of row objects in the property specified
     * in the config as 'root, and optionally a property, specified in the config as 'totalProperty'
     * which contains the total size of the dataset.
     * @return {Object} data A data block which is used by an Ext.data.Store object as
     * a cache of Ext.data.Records.
     */
    readRecords : function(o){
        /**
         * After any data loads, the raw JSON data is available for further custom processing.  If no data is
         * loaded or there is a load exception this property will be undefined.
         * @type Object
         */
        this.jsonData = o;
        if(o.metaData){
            this.onMetaChange(o.metaData);
        }
        //start modifications
        var root = this.getRoot(o), c = root.length, totalRecords = c, success = true;
        
        var s = this.meta, Record = this.getRecordType(root),
            f = Record.prototype.fields, fi = f.items, fl = f.length, v;
        //end modifications
        
        if(s.totalProperty){
            v = parseInt(this.getTotal(o), 10);
            if(!isNaN(v)){
                totalRecords = v;
            }
        }
        if(s.successProperty){
            v = this.getSuccess(o);
            if(v === false || v === 'false'){
                success = false;
            }
        }

        // TODO return Ext.data.Response instance instead.  @see #readResponse
        return {
            success : success,
            records : this.extractData(root, true), // <-- true to return [Ext.data.Record]
            totalRecords : totalRecords
        };
    }
}); 

[asbestos girl]

Another way to achieve dynamic column grids is using metaData.

in your js:

var ds = new Ext.data.Store({
                url: '/cgi-bin/get_dynamic_grid_data.pl', // your script that fetches the data
                reader: new Ext.data.JsonReader({
                        root: 'rows',
                        successProperty: 'success'
                })
        });

        var grid = new Ext.grid.GridPanel({
                ds: ds,
                cm: new Ext.grid.ColumnModel([])
        });
        grid.render(Ext.getBody())

        ds.on('metachange', function (store,meta) {
                var columns = [];
        
                for (var i = 0; i < meta.fields.length; i++ ) {
                        var hidden = meta.fields[i].hidden;
                        columns.push( { header: meta.fields[i].header, dataIndex: meta.fields[i].name, type: meta.fields[i].type, id: meta.fields[i].id, sortable: meta.fields[i].sortable } );
                }

                grid.reconfigure(store, new Ext.grid.ColumnModel(columns));
        })

Then in your data fetching script return json in this format (called /cgi-bin/get_dynamic_grid_data.pl in this example):

{
        metaData: {
                fields: [
                        {header: 'Name', name: 'name', sortable: true},
                        {header: 'URL', name: 'url'},
                        {header: 'Size', name: 'size'},
                        {header: 'Last Modified', name: 'lastmod'}
                ],
                root: 'rows'
        },
        rows: [
                {name: 'Image one', url:'/GetImage.php?id=1', size:46.5, lastmod: new Date(2007, 10, 29)},
                {name: 'Image Two', url:'/GetImage.php?id=2', size:43.2, lastmod: new Date(2007, 10, 30)}
        ],
        success: true
}

The advantage of doing it this way is less code (no extensions required) and you can change the column model on one rendered grid as many times as you want. It also resolved the problem of being able to provide column widths, data types, sortable etc.