Extjs loading FormPanel using Json Data

In this post i will explain about the loading the form with Json data.  Form panel having some fields like 3 textboxes on click of the button i will load the data.
Same time on click of clear button we can remove all text boxes values. The following example will show you how to do this.


Result:

Code:


Ext.onReady(function () {
    var entitySearchForm = new Ext.form.FormPanel({
        title: "Form loading with Json data",
        width: 425,
        frame: true,
        items: [{
            xtype: 'textfield',
            fieldLabel:'Name',
            allowBlank: false,
            name: 'name'
        }, {
            xtype: 'textfield',
            allowBlank: false,
            fieldLabel:'Location',
            name: 'location'
        }, {
            xtype: 'textfield',
            allowBlank: false,
            fieldLabel:'Department',
            name: 'department'
        }],
        buttons: [{
            text: "Load Data",
            listeners: {
                click: onbtnClick
            }
        }, {
            text: 'Clear',
            listeners: {
                click: onbtnClearClick
            }
        }]
    });

    var entitySearchWindow = new Ext.Window({
        layout: 'anchor',
        closable: true,
        resizable: false,
        draggable: false,
        modal: true,
        items: [entitySearchForm]
    });

    //Preparing the Json Data
    var record = {
        data: {
            name: 'Harikrishna',
            location: 'India',
            department: 'IT'
        }
    };

    function onbtnClick() {
        entitySearchForm.getForm().loadRecord(record);
    }

    function onbtnClearClick() {
        entitySearchForm.getForm().reset();
    }

    entitySearchWindow.show();
});