2 * @example Binding a Model to a Form
5 Ext.require('Ext.form.Panel');
6 Ext.require('Ext.form.field.Date');
9 extend: 'Ext.data.Model',
10 fields: ['firstName', 'lastName', 'birthDate'],
14 read: 'data/get_user',
15 update: 'data/update_user'
24 Ext.onReady(function() {
26 var userForm = Ext.create('Ext.form.Panel', {
27 renderTo: Ext.getBody(),
32 defaultType: 'textfield',
35 fieldLabel: 'First Name',
39 fieldLabel: 'Last Name',
44 fieldLabel: 'Date of Birth',
52 var form = this.up('form').getForm(), // get the basic form
53 record = form.getRecord(); // get the underlying model instance
54 if (form.isValid()) { // make sure the form contains valid data before submitting
55 form.updateRecord(record); // update the record with the form data
56 record.save({ // save the record to the server
57 success: function(user) {
58 Ext.Msg.alert('Success', 'User saved successfully.')
60 failure: function(user) {
61 Ext.Msg.alert('Failure', 'Failed to save user.')
64 } else { // display error alert if the data is invalid
65 Ext.Msg.alert('Invalid Data', 'Please correct form errors.')
72 Ext.ModelMgr.getModel('User').load(1, { // load user with ID of "1"
73 success: function(user) {
74 userForm.loadRecord(user); // when user is loaded successfully, load the data into the form