Set the field values to the values from the selected record in tree Extjs

Question

In my application, the two components Ext.tree.Panel and Ext.form.Panel When I click on the tree entry I need to set the field values ​​to the values ​​from the selected record.

When I click on the entry, the event handler function in the controller is triggered:

...
showDataFields: function(view, record, item, index, event) {
    //got a form with fields
    var panel = view.up('mainpanel');
    var formfield = panel.down('mainform');
    //got the selected entry in the tree
    sel = view.getSelectionModel().getSelection()[0];
    console.log(sel)
    //How to assign values from selected record to form fields?
}
...

How can i do this? Example in fiddle

The showDataFields method in the controller file on line 37

Answer 1

You can use loadRecord , which will map your record data to your form by name property. First retrieve form and then set your record to it:

showDataFields: function(view, record, item, index, event) {

    ...

    var form = panel.down('storagepaneltype');
    form.loadRecord(record);
}

Also, you need to change "name" property from name to text to make form match record property. In Fiddle.view.StoragePanel :

items: [{
    xtype: 'textfield',
    name: 'text',             //<-- here
    fieldLabel: 'Наименование',
    itemId: 'name_field',
    value: '',
    //bind: '{person.name}'
}

Here's the FIDDLE