I have a code in which I created a ponent. On click of apply I want to save this forms fields object and make available for getter. So that Parent container can read that.

I also want all field getter/setter, so that can update value runtime. How to achieve this?

Ext.define('MyApp.view.MyForm', {
    extend: 'Ext.form.Panel',

    height: 463,
    width: 227,
    bodyPadding: 10,
    title: 'My Form',

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'textfield',
                    fieldLabel: 'Component Name',
                    anchor: '100%'
                },
                {
                    xtype: 'textfield',
                    fieldLabel: 'Host',
                    anchor: '100%'
                },
                {
                    xtype: 'textfield',
                    fieldLabel: 'Port',
                    anchor: '100%'
                },
                {
                    xtype: 'textfield',
                    fieldLabel: 'Path',
                    anchor: '100%'
                },
                {
                    xtype: 'textareafield',
                    fieldLabel: 'Request Data',
                    anchor: '100%'
                },
                {
                    xtype: 'button',
                    text: 'Apply',
                    listeners: {
                        click: {
                            fn: me.onButtonClick,
                            scope: me
                        }
                    }
                }
            ]
        });

        me.callParent(arguments);
    },
        onButtonClick: function(button, e, options) {
                   var form = this.getForm(),
            values = form.getFieldValues(),
                    //make this available to public
            json = Ext.JSON.encode(values);
            console.log(json);


    }

});

I have a code in which I created a ponent. On click of apply I want to save this forms fields object and make available for getter. So that Parent container can read that.

I also want all field getter/setter, so that can update value runtime. How to achieve this?

Ext.define('MyApp.view.MyForm', {
    extend: 'Ext.form.Panel',

    height: 463,
    width: 227,
    bodyPadding: 10,
    title: 'My Form',

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'textfield',
                    fieldLabel: 'Component Name',
                    anchor: '100%'
                },
                {
                    xtype: 'textfield',
                    fieldLabel: 'Host',
                    anchor: '100%'
                },
                {
                    xtype: 'textfield',
                    fieldLabel: 'Port',
                    anchor: '100%'
                },
                {
                    xtype: 'textfield',
                    fieldLabel: 'Path',
                    anchor: '100%'
                },
                {
                    xtype: 'textareafield',
                    fieldLabel: 'Request Data',
                    anchor: '100%'
                },
                {
                    xtype: 'button',
                    text: 'Apply',
                    listeners: {
                        click: {
                            fn: me.onButtonClick,
                            scope: me
                        }
                    }
                }
            ]
        });

        me.callParent(arguments);
    },
        onButtonClick: function(button, e, options) {
                   var form = this.getForm(),
            values = form.getFieldValues(),
                    //make this available to public
            json = Ext.JSON.encode(values);
            console.log(json);


    }

});

• javascript
• extjs

2 Answers 2

In order to achieve this need to define all variables inside config:{} extjs will automatically create getter/setter.

You can then reference it using this.getVar(), this.setVar()

I hope this is helpful for beginners.

Refer configuration section at http://docs.sencha./ext-js/4-0/#!/guide/class_system for more details