Refer to the record/model data in binding for itemConfig of a girdcell

[paul23]

Well in our application we have an expandable grid (rows are expandable). The itemConfig however needs to bind itself to the data of the record. Now we can have it working by using the painted event, however this puts "code behind' the view. And I rather keep the the view declarative.

The working code is as follow:

Ext.define('AllSports.view.entry.EntryOverview', {    extend: 'Ext.Container',
    xtype: 'entryoverview',

    title: 'Overview',


    defaults: {
        xtype: 'textfield',
        width: '70%',
    },

    layout: {
        type: 'vbox',
        align: 'stretch'
    },
    items: [{
        xtype: 'grid',
        title: 'Overview',

        requires: [
            'Ext.grid.plugin.RowExpander'
        ],
        plugins: 'rowexpander',

        layout: 'fit',
        flex: 1,

        viewModel: {
            type: 'entryoverview'
        },

        bind: {
            store: '{entrystore}'
        },
        itemConfig: {
            body: {
                xtype: 'container',
                listeners: {
                    painted: function (container) {
                        const row = container.up('gridrow');
                        const record = row.getRecord();
                        const data = record.getAssociatedData();

                        container.removeAll(true, true);

                        console.log('teammembers', data);
                        debugger;
                        container.add({
                            xtype: 'list',
                            itemTpl: '{name}',
                            data: data.teammembers //teammembers data
                        });
                    }
                }
            }
        },

        columns: [{
            text: 'Inschrijving',
            dataIndex: 'event',
            flex: 1,
        }]
    }]
});

Now I tried to move the code-behind to a viewmodel, however I can't seem to get the "current record" data in the bound function:

Ext.define('AllSports.view.entry.EntryOverview', {    extend: 'Ext.Container',
    xtype: 'entryoverview',
    title: 'Overview',


    defaults: {
        xtype: 'textfield',
        width: '70%',
    },

    layout: {
        type: 'vbox',
        align: 'stretch'
    },
    items: [{
        xtype: 'grid',
        title: 'Overzicht inschrijving',

        requires: [
            'Ext.grid.plugin.RowExpander'
        ],
        plugins: 'rowexpander',

        layout: 'fit',
        flex: 1,

        viewModel: {
            type: 'entryoverview'
        },

        bind: {
            store: '{entrystore}'
        },
        itemConfig: {
            body: {
                xtype: 'container',
                items: [{
                    xtype: 'list',
                    itemTpl: '{name}',
                    bind: {
                        data: '{getBar}'
                    }
                }]
            }
        },

        columns: [{
            text: 'Inschrijving',
            dataIndex: 'event',
            flex: 1,
        }]
    }]
});

With the viewmodel:

Ext.define('EntryOverviewViewModel', {
    extend: 'Ext.app.ViewModel',

    alias: 'viewmodel.entryoverview',
    data: {
        foo: 5,
        bar: [{name: 'a'}, {name: 'b'}],
    },

    stores: {
        entrystore: {
            type: 'entry'
        }
    },
    formulas: {
        getBar: {
            get: function(data) {
                console.log(data); //this shows a formula, not an object.
                return [{name: 'a'}, {name: 'b'}]; //I need to refer in some way to the current record....
            }
        }
    }

});

So how can I do this? Or is using the painted event the way to go? (That seems silly, as it would "bake" the data on first view, yet the data is highly dynamic).

[Forum_Adm]

Thank you for your patience. I have passed your question on to a team member that will be able to help.

[plgagnon]

Would really love an explaination how to do this, if this was figured out