Question

I am having a formpanel with no store currently. What I want to acheive is on clicking a button in that panel store the data object of that form in a variable. How to achieve this?

Here is my code:

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

Need json object for this form elements

Answer 1

You should use Ext.form.Basic.getFieldValues to get the object you need (as covered here in the docs) and then convert it into JSON.

Following MVC pattern I would put the button handler in a controller, rather than in a view so it would look something like this:

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

I suppose if you really wanted the button handler in your view it could look something like this:

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

EDIT

As you noticed, the fields in the form must have a valid inputId config. That will represent the “key” part of the key/value pairs returned by the getFieldValues call.