Ext.data.Store, Javascript Arrays and Ext.grid.ColumnModel
- by Michael Wales
I am using Ext.data.Store to call a PHP script which returns a JSON response with some metadata about fields that will be used in a query (unique name, table, field, and user-friendly title). I then loop through each of the Ext.data.Record objects, placing the data I need into an array (this_column), push that array onto the end of another array (columns), and eventually pass this to an Ext.grid.ColumnModel object.
The problem I am having is - no matter which query I am testing against (I have a number of them, varying in size and complexity), the columns array always works as expected up to columns[15]. At columns[16], all indexes from that point and previous are filled with the value of columns[15]. This behavior continues until the loop reaches the end of the Ext.data.Store object, when the entire arrays consists of the same value.
Here's some code:
columns = [];
this_column = [];
var MetaData = Ext.data.Record.create([
{name: 'id'},
{name: 'table'},
{name: 'field'},
{name: 'title'}
]);
// Query the server for metadata for the query we're about to run
metaDataStore = new Ext.data.Store({
autoLoad: true,
reader: new Ext.data.JsonReader({
totalProperty: 'results',
root: 'fields',
id: 'id'
}, MetaData),
proxy: new Ext.data.HttpProxy({
url: 'index.php/' + type + '/' + slug
}),
listeners: {
'load': function () {
metaDataStore.each(function(r) {
this_column['id'] = r.data['id'];
this_column['header'] = r.data['title'];
this_column['sortable'] = true;
this_column['dataIndex'] = r.data['table'] + '.' + r.data['field'];
// This display valid information, through the entire process
console.info(this_column['id'] + ' : ' + this_column['header'] + ' : ' + this_column['sortable'] + ' : ' + this_column['dataIndex']);
columns.push(this_column);
});
// This goes nuts at columns[15]
console.info(columns);
gridColModel = new Ext.grid.ColumnModel({
columns: columns
});
