What would cause difference between data after usage in ExtJS store

Question

I use the function at the bottom to (re)create a store every time a grid within a (popup) window renders. However I don't understand why typeDetails is different from what gets logged on the longish line with Ext.pluck (based on https://stackoverflow.com/a/5709096/34806).

The former console log always prints what I expect, in the default case [{"label":"","value":""}], or when typeDetails is pre-populated something such as:

[{"label":"foo","value":"bar"},{"label":"what","value":"ever"}]

But the latter console.log always indicates an empty array, and I always get an empty grid. Could the line with pluck be at fault? That answer, though not the accepted or top-scoring, has been up-modded over 20. What else can I do to work through this.

listeners: {
    render: {
        fn: function (grid) {
            var typeDetails = this.typeDetails || [{ 'label': '', 'value': ''}];

            var store = Ext.create('Ext.data.Store', {
                fields: ['label', 'value'],
                data: [typeDetails]
            });

            console.log(Ext.encode(typeDetails));
            console.log(Ext.encode(Ext.pluck(grid.store.data.items, 'data')));

            grid.reconfigure(store);
        }
    }
}

UPDATE/OUTPUT

In response to Evan's comment "In the case where it defaults data, the store data will be [[{label: '', value: ''}]]" below is what is actually directly copied/pasted from my console:

[{"label":"","value":""}]
[] 

However I think this is because the logging is before grid.reconfigure. Nevertheless shifting my console/logging as follows:

grid.reconfigure(store);

console.log(Ext.encode(this.typeDetails));
console.log(Ext.encode(typeDetails));
console.log(Ext.encode(Ext.pluck(grid.store.data.items, 'data')));

Results in the following mysterious output in the non-default case (when this.typeDetails is pre-populated):

[{"label":"foo","value":"bar"},{"label":"what","value":"ever"}] 
[{"label":"foo","value":"bar"},{"label":"what","value":"ever"}]
[{"label":"","value":""}]

It's an editable grid, and the non-default values can only exist after the default empty row, so it's as though that empty row is being retained.

Answer 1

The following alternative approach works:

listeners: {
    render: {
        fn: function (grid) {
            var store = Ext.create('Ext.data.Store', {
                fields: ['label', 'value'],
                data: []
            });

            if (this.typeDetails) {
                for (var i = 0, n = this.typeDetails.length; i < n; i++) {
                    store.add(this.typeDetails[i]);
                }
            }
            else {
                store.add({ 'label': '', 'value': '' });
            }

            grid.reconfigure(store);
        }
    }
}