Dynamically assigning titles to Ext.grid columns

[Sam007]

I am trying to understand how I can assign titles to grid columns dynamically. I have a array (attrfields) which contains the titles but grid needs arrayreader to assign the titles I am trying to add that title to the arrayreader so that it can be replicated in the grid.

So far this is what I have done.

function processSpatialQuery(e) {


    var feat;
    var attrfields = [];
    var attrData = [];




    for (var i = 0; i < e.features.length; i++) {
        //Work on how to fetch properties for all the layers attributes
        feat = e.features[i];
        var values = [];
        for (var prop in feat.attributes) {
            values.push(feat.attributes[prop]);
        }
        attrData.push(values)
    }


    if (attrData.length > 0) {
        for (var prop in e.features[0].attributes) {
            attrfields.push({
                'name': prop
            });
        }
    }


    var myReader = new Ext.data.ArrayReader({}, [{
        name: 'family'
    }, {
        name: 'species'
    }
    //attrfields
    ]);


    stor = new Ext.data.Store({
        data: attrData,
        reader: myReader,
        autoLoad: true
    });




    var grid = new Ext.grid.GridPanel({
        title: "Intersected Species Info",
        store: stor,
        width: 585,
        height: 260,
        stripeRows: true,
        tbar: [],
        columns: [{
            header: "Plant Family",
            width: 200,
            dataIndex: "family"
        }, {
            header: "Species Name",
            width: 200,
            dataIndex: "species"
        }],
        listeners: {
            render: function (grid) {
                grid.getSelectionModel().selectFirstRow();
            }
        }
    });


    var exportCSV = new Ext.ux.Exporter.Button({
        component: grid,
        text: 'Download CSV'
    });


    grid.getTopToolbar().add(exportCSV);


    var win = new Ext.Window({
        width: 600,
        height: 300,
        autoScroll: true,
        title: "Species Data",
        listners: {
            show: function () {
                this.loadMask = new Ext.LoadMask(this.body, {
                    msg: 'Loading. Please wait...'
                });
            }
        },
        items: grid
    });
    win.show();
}

So, what I am trying to find is a means to assign title to the grid dynamically. I have the titles in the array but I also need to provide that info in the grid column header, data index. Any ideas how I can get that done?

[crysfel]

Instead of harcoding the columns you should create the array of columns dynamically, something like this:

var columns = [];

if (attrData.length > 0) {
        for (var prop in e.features[0].attributes) {
            attrfields.push({
                'name': prop
            });

            columns.push({
                text : prop,
                width: 200,
                dataIndex: prop //same as the field name in your model
            });
        }
}

var grid = new Ext.grid.GridPanel({
        title: "Intersected Species Info",
        store: stor,
        width: 585,
        height: 260,
        stripeRows: true,
        tbar: [],
        columns: columns,
        listeners: {
            render: function (grid) {
                grid.getSelectionModel().selectFirstRow();
            }
        }
    });

I hope it helps

Regards

[Sam007]

Ok so I did the following changes to my code and it looks like this,

var attrfields = [];
var attrData = [];
var columns = [];




for (var i = 0; i < e.features.length; i++) {
    //Work on how to fetch properties for all the layers attributes
    feat = e.features[i];
    var values = [];
    for (var prop in feat.attributes) {
        values.push(feat.attributes[prop]);


    }
    attrData.push(values)
}


if (attrData.length > 0) {
    for (var prop in e.features[0].attributes) {
        attrfields.push({
            'name': prop
        });
        columns.push({
            header: prop,
            width: 200,
            dataIndex: prop //same as the field name in your model
        });
    }
}


var myReader = new Ext.data.ArrayReader({}, 
attrfields);


stor = new Ext.data.Store({
    data: attrData,
    reader: myReader,
    autoLoad: true
});




var grid = new Ext.grid.GridPanel({
    title: "Intersected Species Info",
    store: stor,
    width: 585,
    height: 260,
    stripeRows: true,
    tbar: [],
    columns: columns,
    listeners: {
        render: function (grid) {
            grid.getSelectionModel().selectFirstRow();
        }
    }
});

This is running great. Thanks