Extjs getting the `formpanel` that is created dynamically from button click

Question

I have ExtJS View-Port panel, that contain center panel, that contain tablpanel, in which I have added gridpanel in one tab, on this I have put Add Person button in tbar of , that will add a new tab of a formpanel, in its Reset button, I am not able to access Form to reset it.

Do any body have faced same issue?

Please help how to get it working.

Ext.onReady(function() {
    // Ext.get(document.body, true).toggleClass('xtheme-gray');
    var myBorderPanel = new Ext.Viewport({
        title: 'Software Releases',
        // renderTo: document.body,
        renderTo: Ext.getBody(),
        layout: 'border',

        id: 'main',

        items: [{
            title: 'Center Region',
            region: 'center', // center region is required, no width/height specified

            tbar: [{
                text: 'Add person', // only when user have write priovilege.
                handler: function() {
                    var tabpanel = Ext.getCmp('main').findById('tabs');

                    var wtab = tabpanel.add({
                        //     // var addrelease_win = new Ext.Window({
                        url: 'reledit-submit.json',
                        id: 'addform0',
                        // height: 300, width: 400,
                        layout: 'form',
                        frame: true,
                        title: 'Add New Release',
                        closable: true,

                        items: [{
                            xtype: 'textfield',
                            fieldLabel: 'Name'
                        }],


                        buttons: [{
                            text: 'Save',
                            scope: wtab,
                            handler: function() {
                                wtab.getForm().submit({
                                    success: function(f, a) {
                                        Ext.Msg.alert('Success', 'It worked');
                                    },
                                    failure: function(f, a) {
                                        Ext.msg.alert('Warnning', 'Error');
                                    }
                                });
                            }
                        }, {
                            text: 'Reset',
                            scope: wtab,
                            handler: function() {
                                // Ext.getCmp('addform0').getForm().reset();
                                // tabpanel.getActiveTab.reset();
                                // Ext.getCmp('main').findById('addform').getForm().reset();
                                // this.getForm().reset();
                                // this.getForm().reset();
                                // Ext.Msg.alert('sdfsd', 'asdfsd ' + Ext.getCmp('addform0').getValue() + ' sdfsd');
                                this.findById('addform0').getForm().reset();
                                // Ext.Msg.alert('sdfsd', 'asdfsd ');
                            }
                        }]
                    });
                    // addrelease_win.show();

                    tabpanel.activate(tabpanel.items.length - 1);
                }
            }],
            xtype: 'tabpanel',

            id: 'tabs',

            activeTab: 0,

            items: [{
                title: 'Data',
                xtype: 'editorgrid',
                store: store,
                stripeRows: true,
                // autoExpandColumn: 'title',
                columns: [{
                    header: "Name",
                    dataIndex: "name",
                    width: 50,
                    sortable: true
                }, {
                    header: "DOB",
                    dataIndex: "dob",
                    sortable: true
                }]
            }],
            margins: '5 5 0 0',
        })
    })
});

Solution

Doesn't wtab.getForm().reset(); work?

If not, use this.ownerCt to get to the buttons container and then just walk up the chain until you get to a point where you can access the form.

UPDATE

The real problem is that its a Panel with a form layout that is created and not a FormsPanel.

Change layout:'form' into xtype:'form' and .getForm() should work.