Extjs4 Formpanel数据存储在变量中

我有一个formpanel，目前没有商店。我想要实现的是单击面板中的按钮，将该表单的数据对象存储在变量中。如何做到这一点

这是我的密码：

Ext.define('Nits.view.PropertyPanelCmp', {
            extend:'Ext.form.Panel', 
            alias : 'widget.propertypanelCmp',
            id: 'propertypanelCmp',
            title: 'File properties',
            height: 500,
            width: 200,
            draggable: false,
            closable: false,    
            //autoScroll:true,
            layout: {
                align: 'stretch',
                type: 'vbox'
            },
            fieldDefaults: {
                labelWidth: 65
            },
            bodyPadding: 10,    

            initComponent: function() {
                var me = this;

                me.items = [
                {
                    xtype: 'fieldset',
                    height: 108,
                    title: 'Common Properties',
                    items: [
                        {
                            xtype: 'textfield',
                            fieldLabel: 'Name',
                            anchor: '100%'
                        },
                        {
                            xtype: 'textfield',
                            fieldLabel: 'Type',
                            anchor: '100%'
                        },
                        {
                            xtype: 'textfield',
                            fieldLabel: 'Age',
                            anchor: '100%'
                        }
                    ]
                },
                {
                    xtype: 'fieldset',
                    title: 'Level1 Properties',
                    items: [
                        {
                            xtype: 'textfield',
                            fieldLabel: 'Sample1',
                            anchor: '100%'
                        },
                        {
                            xtype: 'checkboxfield',
                            fieldLabel: 'Recursive',
                       //     boxLabel: 'Box Label',
                            anchor: '100%'
                        },
                        {
                            xtype: 'checkboxfield',
                            fieldLabel: 'Delete',
                     //       boxLabel: 'Box Label',
                            anchor: '100%'
                        },
                        {
                            xtype: 'checkboxfield',
                            fieldLabel: 'Read Only',
                         //   boxLabel: 'Box Label',
                            anchor: '100%'
                        },
                        {
                            xtype: 'textfield',
                            fieldLabel: 'Include',
                            anchor: '100%'
                        },
                        {
                            xtype: 'textfield',
                            fieldLabel: 'Exclude',
                            anchor: '100%'
                        }
                    ]
                },
                {
                    xtype: 'fieldset',
                    title: 'Level2 Properties',
                    items: [
                        {
                            xtype: 'combobox',
                            fieldLabel: 'File B',
                            anchor: '100%'
                        }
                    ]
                },
                {
                    xtype: 'button',
                    text: 'Apply',
                    listeners: {
                        click: {
                            fn: me.onButtonClick,
                            scope: me
                        }
                    }
                }
            ];
                me.callParent(arguments);
            },
            //Here do what you want to when click on Apply button
            onButtonClick: function(button, e, options) {
                alert('Sample');
            }
}
);

---

此表单元素需要json对象

您应该使用

Ext.form.Basic.getFieldValues

获取所需的对象（如文档中所述），然后将其转换为json

按照MVC模式，我会将按钮处理程序放在控制器中，而不是视图中，因此它看起来像这样：

Ext.define('Nits.controller.MyController', {
    extend: 'Ext.app.Controller',

    views:  [
        'PropertyPanelCmp',
    ],

    init: function() {
        var me = this;

        me.control({

            'propertypanelCmp button[text=Apply]': {

                click: function(button) {
                    var form = button.up('propertypanelCmp').getForm(),
                        values = form.getFieldValues(),
                        json = Ext.JSON.encode(values);

                    console.log(json);
                    alert(json);
                }
            }
        });
    }
}

//Here do what you want to when click on Apply button
onButtonClick: function(button, e, options) {
    var form = this.getForm(),
        values = form.getFieldValues(),
        json = Ext.JSON.encode(values);

    console.log(json);
    alert(json);
}

我想，如果您真的想要视图中的按钮处理程序，它可能会如下所示：

Ext.define('Nits.controller.MyController', {
    extend: 'Ext.app.Controller',

    views:  [
        'PropertyPanelCmp',
    ],

    init: function() {
        var me = this;

        me.control({

            'propertypanelCmp button[text=Apply]': {

                click: function(button) {
                    var form = button.up('propertypanelCmp').getForm(),
                        values = form.getFieldValues(),
                        json = Ext.JSON.encode(values);

                    console.log(json);
                    alert(json);
                }
            }
        });
    }
}

//Here do what you want to when click on Apply button
onButtonClick: function(button, e, options) {
    var form = this.getForm(),
        values = form.getFieldValues(),
        json = Ext.JSON.encode(values);

    console.log(json);
    alert(json);
}

编辑

---

正如您所注意到的，表单中的字段必须具有有效的

inputId

config。这将表示

getFieldValues

调用返回的键/值对的“键”部分。

我接受了所有的工作答案。只是确定一下。你会惊讶有多少人不知道。它给出了类似{“ext-gen1018”：“ext-gen1020”：“ext-gen1021”：“ext-gen1024”：“ext-gen1026”：“ext-gen1026”：false，“ext-gen1027”：false，“ext-gen1028”：false，“ext-gen1029”：“ext-gen1030”：“ext-gen1032”：null}如何识别字段？我尝试提供字段Id，但它没有显示字段Id，而是为DIV显示它