Question

我现在有一个没有商店的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对象

Answer 1

您应该使用Ext.form.Basic.getFieldValues获取所需的对象（如文档中所涵盖的here），然后将其转换为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);
}

修改

正如您所注意到的，表单中的字段必须具有有效的inputId配置。这将代表getFieldValues调用返回的键/值对的“关键”部分。

Extjs Formpanel数据存储在变量中

1 个答案: