无法从选项卡面板内的表单中获取值答案

【问题标题】：Can't getValues from form inside tabpanel无法从选项卡面板内的表单中获取值
【发布时间】：2019-01-31 08:49:48
【问题描述】：

我不知道如何从表单字段中获取值。表单是选项卡面板内的项目之一。导致控制台抛出这个：

“未捕获的类型错误：charform.getValues 不是函数”

当我使用它从表单中获取值时，我没有遇到问题：

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

这是我的代码：

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
                    });
                }
            }]
        }]
    }]
});

我希望那个处理程序做 POST 查询。但现在我有了这个：

未捕获的类型错误：charform.getValues 不是函数

【问题讨论】：

您是否尝试将处理函数更改为箭头函数？
你在哪里使用form？
@PatrykUszyński 我不知道它是如何在 Extjs 处理程序中使用的。例如，这不起作用： handler: function () { var charform = this.up => charform.getValues(); }
@RohitSharma form-是tabpanel项目中的一种
this.up('panel') 会返回您的特征面板，它不是表单

标签： javascript extjs extjs6 extjs6-modern

【解决方案1】：

首先你需要使用 this.up('panel') 在 tabpanel 范围内，然后你需要 this.up('form') 来获取实际的表单，最后你可以获取你的值

检查这个工作示例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
                            });
                        }
                    }]
                }]
            }]
        });
    }
});

【讨论】：