0

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

这是我的代码：

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 对象

4

1 回答 1

2

您应该使用来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);
}

编辑

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

于 2012-07-17T16:52:45.330 回答