Extjs bind config variable to value

Question

I have the following application: https://fiddle.sencha.com/#view/editor&fiddle/1nmm. I'm using extjs 6.

After double click event on a row, I want to open a new tab. The new tab should contain a form with the information from the grid. My problem is that when I try to bind the displayfield value, the output is empty( nothing is shown).

xtype: 'displayfield',
fieldLabel: 'Id',
bind: {
    value: '{record.data.ts_id}'
}

The above 'record' is declared as follow:

config: {
    record: null,
    rowIndex: null
},

bind: {
    record: '{recordVM}',
    rowIndex: '{rowIndexVM}'
}

How to properly bind to displayfield's value?

Answer 1

2 things:

1) Modify the way you're passing data to the viewmodel in the TabUIController:

viewModel: {
    data: {
        record: record,
        rowIndex: rowIndex
    }
}

There's no point trying to re-map those things.

2) Modify the bind statement in your view to value: '{record.ts_id}', the binding is smart enough to drill into the fields when it sees a record.

Answer 2

Try this:

TabUIGrid.js

 bind: {
    store :'{users}',
    selection : '{myrecord}'
},

TabFormTest.js

{
        xtype: 'displayfield',
        fieldLabel: 'Name',
        bind: '{myrecord.ts_name}'
    }, {
        xtype: 'displayfield',
        fieldLabel: 'Email',
        bind: '{myrecord.ts_email}'
    }

I tested it on your fiddle and it works fine.