javascript - 无法从 tabpanel 中的表单获取值

Question

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

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

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

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 查询。但现在我有这个:

Uncaught TypeError: charform.getValues is not a function

Answer 1

首先你需要在 tabpanel 范围内使用 this.up('panel')，然后你需要 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
                            });
                        }
                    }]
                }]
            }]
        });
    }
});