PDA

View Full Version : Dynamically assigning titles to Ext.grid columns



Sam007
5 Oct 2012, 11:01 AM
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
5 Oct 2012, 11:22 AM
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
5 Oct 2012, 12:06 PM
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