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

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

• javascript
• extjs

3 Answers 3

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

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.

Because you first use the variable this_column in the global context (at the top of your example) it bees 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 = {};
    ...