Can't getValues from form inside tabpanel

Question

I havn't idea how to getValues from fields of form. Form is one from items inside tabpanel. Cause console throw this:

"Uncaught TypeError: charform.getValues is not a function"

I didn't face a problem when I get values from form using that:

var dataupNew = this.up().items.items[0];
var dataSetNew = dataupNew.getValues();

Here is my code:

Ext.define('Foresto.view.forms.Cutarea', {
    extend: 'Ext.panel.Panel',
    title: 'Les',
    margin: 5,
    height: 600,
    scrollable: true,
    xtype: 'foresto-cutarea',
    items: [{
        xtype: 'tabpanel',
        cls: 'grbuttons',
        layout: 'card',
        items: [{
            xtype: 'panel',
            cls: 'grbuttons',
            layout: 'vbox',
            title: 'Characteristic',
            items: [{
                xtype: 'selectfield',
                label: 'number'
            }, {
                xtype: 'textfield',
                label: 'tract'
            }, {
                xtype: 'selectfield',
                label: 'task',
                name: 'targetUsing'
            }, {
                xtype: 'button',
                text: 'save',
                cls: 'grbuttons',
                margin: 10,
                ui: 'confirm',
                handler: function () {
                    var charform = this.up('panel');
                    var charSet = charform.getValues();

                    Ext.Ajax.request({
                        url: '/api/characteristic/',
                        method: 'POST',
                        params: charSet
                    });
                }
            }]
        }]
    }]
});

I wish that handler to do POST query. But now I have this:

Uncaught TypeError: charform.getValues is not a function

Did you tried to change your handler function to arrow function? — Patryk Uszyński, Jan 31 '19 at 08:57
Where you are using [form](https://docs.sencha.com/extjs/6.5.0/classic/Ext.form.Panel.html) ? — Rohit Sharma, Jan 31 '19 at 09:10
@PatrykUszyński i down't know how it used in Extjs handler. For example this don't work : handler: function () { var charform = this.up => charform.getValues(); } — Tyomik_mnemonic, Jan 31 '19 at 10:04
`this.up('panel')` returns you your Characteristic panel, which isn't a form — Coderino Javarino, Jan 31 '19 at 22:33

score 1 · Answer 1 · answered Feb 07 '19 at 07:07

First you need to use this.up('panel') to be in tabpanel scope, then you need this.up('form') to get the actual form finally you can get your values

Check this working example Extjs Fiddle

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.create('Ext.form.Panel', {
            title: 'Les',
            margin: 5,
            height: 600,
            renderTo:Ext.getBody(),
            scrollable: true,
            items: [{
                xtype: 'tabpanel',
                layout: 'card',
                items: [{
                    xtype: 'panel',
                    layout: 'vbox',
                    title: 'Characteristic',
                    items: [ {
                        xtype: 'textfield',
                        label: 'tract'
                    }, {
                        xtype: 'button',
                        text: 'save',
                        margin: 10,
                        handler: function () {
                            var charpanel = this.up('panel');
                            var charform = charpanel.up('form');
                            var charSet = charform.getValues();

                            Ext.Ajax.request({
                                url: '/api/characteristic/',
                                method: 'POST',
                                params: charSet
                            });
                        }
                    }]
                }]
            }]
        });
    }
});

Can't getValues from form inside tabpanel

1 Answers1