1. #1
    Sencha User
    Join Date
    Sep 2012
    Posts
    17
    Vote Rating
    0
    Sam007 is on a distinguished road

      0  

    Default Answered: Dynamically assigning titles to Ext.grid columns

    Answered: Dynamically assigning titles to Ext.grid columns


    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.
    Code:
    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?

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

    Code:
    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

  3. #2
    crysfel's Avatar
    Join Date
    Feb 2008
    Location
    New York, USA
    Posts
    215
    Answers
    7
    Vote Rating
    8
    crysfel will become famous soon enough

      0  

    Default


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

    Code:
    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

  4. #3
    Sencha User
    Join Date
    Sep 2012
    Posts
    17
    Vote Rating
    0
    Sam007 is on a distinguished road

      0  

    Default


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

    Code:
    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
    Last edited by Sam007; 8 Oct 2012 at 10:27 AM. Reason: Needed to add the attrfields without the []

Thread Participants: 1

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi