The problem with getting the top container component. Extjs

Question

When I click on a tree record, I try to set the values ​​of this record and set these values ​​in the form.

In the eventcler itemclick: this.showDataFields function is triggered:

....

showDataFields: function(view, record, item, index, event) {
        //got a form with fields
        var panel = view.up('maintab');
       console.log(panel)

        //var formfield   = panel.down('actionform');
        //assign values from selected record to form fields
        //formfield.loadRecord(record);

    },

..........

In this function, view.up ('maintab') is underfined.

The maintab is Ext.tab.Panel which houses the tree.

Why can not get the topmost container and how to do it correctly?

Made an example in fiddle

thank

Answer 1

You should use view.up('treepanel').nextSibling().getForm().setValues(record.data) in your showDataFields function to set these values ​​in the form.

Answer 2

You could have provided a better example, therefore within the limitations that were proposed.

The answer I got was this were the changes in the ActionFormTree class that got the code below:

Ext.define('Fiddle.view.ActionFormTree', {
    extend: 'Ext.form.Panel',
    alias: 'widget.actionformtree',
    xtype: 'actionform',//mainform,
    initComponent: function(){
        var me = this;
        Ext.apply(me,{
            items: [{
                xtype: 'form',
                border: false,
                anchor: '100%',
                height: 100,
                layout: {
                    type: 'vbox',
                    align: 'middle',
                    pack: 'center'
                },
                items: [{
                    xtype: 'textfield',
                    name: 'text',
                    fieldLabel: 'Наименование',
                    itemId: 'name_field',
                }, {
                    xtype: 'textfield',
                    name: 'code',
                    fieldLabel: 'Код',
                    itemId: 'code_field',
                }]
            }],
            buttons: [{
                text: 'Save Changes',
                scope: me,
                handler: function (button) {
                    //Эта панель со значениями полей
                    form   = me.down('form');

                    var mainpanel = me.up('#maincontainer');
                    var treeform   = mainpanel.down('usertree');
                    var sel = treeform.getSelectionModel().getSelection()[0];
                    store = treeform.getStore();

                    console.log(treeform)
                    store.suspendAutoSync()
                    var child = sel.set({
                        text: 'Измененное',
                        leaf: true
                    });

                    sel.expand()
                    store.resumeAutoSync();

                    //var currRecord = form.getRecord();

                    //if (currRecord) {
                    //    form.updateRecord();
                    //   form.reset();
                    //}
                }
            }]            
        });

        me.callParent(arguments);
    }

});

So, in this example, for it to work, you will need to have a node selected to work.

Hope it helps and finalize your question.

Sample to your code