extjs 6.2 grid, create columns from store dynamically - dynamic

Question

In my extjs 6.2 project I am trying to create columns for my grid from the store which is dynamic.
My grid is created on view page
title: 'Data Viewer',
xtype: 'grid',
itemId: 'gridDataViewerId',
bind: {
store: '{storeData}'
},
ui: 'featuredpanel-framed',
cls: 'custom-grid',
margin: '5',
//frame: false,
//forceFit: true,
//height: '100%',
flex: 1,
plugins: [{
ptype: 'gridexporter'
}]
Once the store is loaded I am trying to create the columns and populate the data but its not working. Any ideas what I am doing wrong?
this.storeData.load({
url: x.util.GlobalVar.urlData_getData,
params: {
cid: cid,
email: localStorage.getItem('username'),
dateStart: targetStart,
dateEnd: targetEnd,
filename: targetFile
},
callback: function (response, opts) {
debugger;
var columnModel = me.storeData.data.items;
me.myGrid.reconfigure(me.storeData, columnModel);
}
});
I think my problem is creating the column array from my store. If I try do do it manually it works... but I need to do it dynamically.

Answer 1

Use the store's metachange listener. Something like:
myStore.on('metachange', function(store, meta){
myGrid.reconfigure(store, meta.columns);
}
Where the store data looks something like this:
{
"records": [{
"id": 74474,
"name": "blah",
"age": 5
},{
"id": 74475,
"name": "asfdblah",
"age": 35
}],
"totalRecords": 2,
"metaData": {
"fields": [{
"name": "name"
},{
"name": "age",
"type": "number"
}],
"columns": [{
"text": "Name",
"dataIndex": "name",
"width": 150
},
{
"text": "Age",
"dataIndex": "age"
}],
},
"success": true
}