0

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?

florin
  • 719
  • 12
  • 31

2 Answers2

0

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.

jose
  • 1,490
  • 3
  • 30
  • 65
  • Yes, it's working but there is a catch: [here](https://fiddle.sencha.com/#fiddle/1nof&view/editor) , when you open a new tab and then change the grid selection, the information in the opened tab also changes. This is an undesired behavior. – florin Jan 06 '17 at 09:14
0

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.

Evan Trimboli
  • 29,900
  • 6
  • 45
  • 66
  • It's working: [here](https://fiddle.sencha.com/#fiddle/1nog&view/editor) is the fiddle. I still have some questions: it seems that when binding to displayfield value, the bindable variable is the one from the view model no the one from the config. The approach with config is used if you want to pass data further down the hierarchy(for example if you have a modal window)? If not, when config approach is used? – florin Jan 06 '17 at 10:00