ExtJS - unable to bind column header

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