Ext.data.Store, Javascript Arrays and Ext.grid.ColumnModel

Question

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
   });

Answer 1

Okay, since the this_column array was responding correctly on each run, but the columns array was not, I figure it must be an issue with the push().

After a bit more toying with it, I moved altered the code to reset the this_column array on each iteration of the loop - seems to have fixed the issue...

metaDataStore.each(function(r) {
    this_column = [];
    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'];
    columns.push(this_column);
});

Answer 2

I see you've already found something that works, but just to offer some advice for the future: this is much easier if you use a json store and column model directly instead of performing intermediate steps by hand.

I'm not sure if you're using a grid or dataview, but the concept is pretty much the same for both of them. If you have to do a bit of data customization, but instead of doing it by hand here you can actually just do it in a prepareData callback function.

Answer 3

Because you first use the variable this_column in the global context (at the top of your example) it becomes a global variable. You should instead instantiate each column definition as an object literal (split into multiple lines for read-ability).

metaDataStore.each(function(r) {
  columns.push({
    id: r.data['id'],
    header: r.data['title'],
    sortable: true,
    dataIndex: r.data['table'] + '.' + r.data['field']
  });
});

Or if you really wanted to use a variable, you could just do this to make sure it's a local variable

metaDataStore.each(function(r) {
    var this_column = {};
    ...