Results 1 to 3 of 3

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

  1. #1
    Sencha User
    Join Date
    Jul 2018
    Posts
    3

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

    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:

    Code:
    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:


    Code:
    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:

    Code:
    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).

  2. #2
    Sencha - Forum Administrator
    Join Date
    Sep 2017
    Posts
    1,006
    Answers
    5

    Default

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

  3. #3
    Sencha Premium Member
    Join Date
    Dec 2011
    Posts
    44

    Default

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

Similar Threads

  1. view model with data store and model binding
    By deshazer72 in forum Ext JS 6.x Q&A
    Replies: 2
    Last Post: 1 Sep 2016, 12:02 PM
  2. Binding model record to form and arrays
    By tachtevrenidis in forum Sencha Touch 2.x: Q&A
    Replies: 1
    Last Post: 9 Jan 2012, 1:27 AM
  3. Need advice on form Model binding and record.save()
    By Specks in forum Ext: Discussion
    Replies: 1
    Last Post: 9 Aug 2011, 2:00 AM
  4. how to refer to linked combo data record
    By madcity in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 6 Sep 2009, 10:12 PM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •