ExtJS - unable to bind column header - extjs

Question

I have an ExtJS 6.5.1 app. I am unable to bind a grid column to the viewModel. I am using the same viewModel for a grid && a form.
If I bind the fieldLabel it works. If I bind the grid title to that viewModel that also works. Its just the column header I am unable to bind.
I get the following errors:
Ext.mixin.Bindable.applyBind(): Cannot bind header on Ext.grid.column.Column - missing a setHeader method.
And
this[binding._config.names.set] is not a function
Someone elsewhere was getting similiar errors for development mode because some required classes weren't loading so he was able to resolve it by requiring Ext.data.proxy.*. I tried the same and just "*" but got the same erorrs.
Here is the FIDDLE.

Answer 1

The header config deprecated since version 4.0 use text instead.
Paste bellow code in your FIDDLE it will work and bind perfectly.
CODE SNIPPET
Ext.define('MyApp.view.TestViewModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.test',
data: {
title: ''
},
constructor: function (config) {
var me = this;
this.callParent(arguments);
me.setStores({
lang: {
fields: ['title'],
proxy: {
type: 'ajax',
url: 'data.json',
reader: {
type: 'json'
}
},
autoLoad: true,
listeners: {
load: function (store, records) {
me.set('title', store.getAt(0).get('title'));
}
}
}
});
}
});
Ext.define('MyApp.view.TestGrid', {
extend: 'Ext.grid.Panel',
title: "MY GRID",
xtype: "mygrid",
viewModel: {
type: 'test'
},
columns: [{
text: "Col1"
}, {
bind: {
text: "{title}"
},
flex: 1
}]
});
Ext.define('MyApp.view.TestForm', {
extend: 'Ext.form.Panel',
layout: 'fit',
title: "MY FORM",
xtype: "myform",
viewModel: {
type: 'test'
},
items: [{
xtype: "textfield",
bind: {
fieldLabel: "{title}"
}
}]
});
Ext.onReady(function () {
Ext.create('Ext.container.Container', {
renderTo: Ext.getBody(),
layout: "fit",
flex: 1,
items: [{
xtype: "myform"
}, {
xtype: "mygrid"
}]
});
});