ExtJS - невозможно связать заголовок столбца - PullRequest
Новая
       33

ExtJS - невозможно связать заголовок столбца

0 голосов
/ 25 апреля 2018

У меня есть приложение ExtJS 6.5.1. Я не могу привязать столбец grid к viewModel. Я использую ту же модель представления для сетки && формы.

Если я привязываю поле Label, оно работает Если я связываю заголовок сетки с той моделью представления, которая также работает. Я просто не могу связать заголовок столбца.

Я получаю следующие ошибки: 

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

И 

this[binding._config.names.set] is not a function

Кто-то в другом месте получал похожие ошибки для режима разработки, потому что некоторые требуемые классы не загружались, поэтому он смог решить эту проблему, потребовав Ext.data.proxy.*. Я попробовал то же самое и только "*", но получил те же ошибки.

Вот это FIDDLE .

1 Ответ

0 голосов
/ 25 апреля 2018

Конфигурация header устарела с версии 4.0, вместо нее используется text.

Вставьте приведенный ниже код в ваш FIDDLE , он будет отлично работать и связываться.

КОД 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"
        }]
    });
});
...