ExtJS-无法绑定列标题

我有一个ExtJS6.5.1应用程序。我无法将

网格

列绑定到viewModel。我对网格和表单使用相同的viewModel

如果我绑定fieldLabel，它就会工作。如果我将栅格标题绑定到同样有效的viewModel。这只是我无法绑定的列标题

我得到以下错误：

Ext.mixin.Bindable.applyBind(): Cannot bind header on Ext.grid.column.Column - missing a setHeader method.

及

其他地方的人在开发模式中遇到了类似的错误，因为一些必需的类没有加载，所以他能够通过要求

Ext.data.proxy.*

来解决它。我也试过同样的方法，只是

“*”

，但得到了同样的ERORR

以下是自4.0版使用以来被弃用的配置

将下面的代码粘贴到您的应用程序中，它将工作并完美绑定

代码片段

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

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