Clear Up
SharpKit Reference

Panel Class

Namespace: Ext.form

Base Types

System.Object

Constructors

Name Description
Panel(PanelConfig)
Panel()

Properties

Name Description
alternateClassName The Form panel presents a set of form fields and provides convenient ways to load and save data. Usually a form panel just contains the set of fields you want to display, ordered inside the items configuration like this: * var form = Ext.create('Ext.form.Panel', { items: [ { xtype: 'textfield', name: 'name', label: 'Name' }, { xtype: 'emailfield', name: 'email', label: 'Email' }, { xtype: 'passwordfield', name: 'password', label: 'Password' } ] }); * Here we just created a simple form panel which could be used as a registration form to sign up to your service. We added a plain {@link Ext.field.Text text field} for the user's Name, an {@link Ext.field.Email email field} and finally a {@link Ext.field.Password password field}. In each case we provided a {@link Ext.field.Field#name name} config on the field so that we can identify it later on when we load and save data on the form. *

Loading data

* Using the form we created above, we can load data into it in a few different ways, the easiest is to use {@link #setValues}: * form.setValues({ name: 'Ed', email: 'ed@sencha.com', password: 'secret' }); * It's also easy to load {@link Ext.data.Model Model} instances into a form - let's say we have a User model and want to load a particular instance into our form: * Ext.define('MyApp.model.User', { fields: ['name', 'email', 'password'] }); * var ed = Ext.create('MyApp.model.User', { name: 'Ed', email: 'ed@sencha.com', password: 'secret' }); * form.setRecord(ed); *

Retrieving form data

* Getting data out of the form panel is simple and is usually achieve vai the {@link #getValues} method: * var values = form.getValues(); * //values now looks like this: { name: 'Ed', email: 'ed@sencha.com', password: 'secret' } * It's also possible to listen to the change events on individual fields to get more timely notification of changes that the user is making. Here we expand on the example above with the User model, updating the model as soon as any of the fields are changed: * var form = Ext.create('Ext.form.Panel', { listeners: { '> field': { change: function(field, newValue, oldValue) { ed.set(field.getName(), newValue); } } }, items: //as before }); * The above used a new capability of Touch 2.0, which enables you to specify listeners on child components of any container. In this case, we attached a listener to the {@link Ext.field.Text#change change} event of each form field that is a direct child of the form panel. Our listener gets the name of the field that fired the change event, and updates our {@link Ext.data.Model Model} instance with the new value. For example, changing the email field in the form will update the Model's email field. *

Submitting forms

* There are a few ways to submit form data. In our example above we have a Model instance that we have updated, giving us the option to use the Model's {@link Ext.data.Model#save save} method to persist the changes back to our server, without using a traditional form submission. Alternatively, we can send a normal browser form submit using the {@link #submit} method: * form.submit({ url: 'url/to/submit/to', method: 'POST', success: function() { alert('form submitted successfully!'); } }); * In this case we provided the url to submit the form to inside the submit call - alternatively you can just set the {@link #url} configuration when you create the form. We can specify other parameters (see {@link #submit} for a full list), including callback functions for success and failure, which are called depending on whether or not the form submission was successful. These functions are usually used to take some action in your app after your data has been saved to the server side.
extend The Form panel presents a set of form fields and provides convenient ways to load and save data. Usually a form panel just contains the set of fields you want to display, ordered inside the items configuration like this: * var form = Ext.create('Ext.form.Panel', { items: [ { xtype: 'textfield', name: 'name', label: 'Name' }, { xtype: 'emailfield', name: 'email', label: 'Email' }, { xtype: 'passwordfield', name: 'password', label: 'Password' } ] }); * Here we just created a simple form panel which could be used as a registration form to sign up to your service. We added a plain {@link Ext.field.Text text field} for the user's Name, an {@link Ext.field.Email email field} and finally a {@link Ext.field.Password password field}. In each case we provided a {@link Ext.field.Field#name name} config on the field so that we can identify it later on when we load and save data on the form. *

Loading data

* Using the form we created above, we can load data into it in a few different ways, the easiest is to use {@link #setValues}: * form.setValues({ name: 'Ed', email: 'ed@sencha.com', password: 'secret' }); * It's also easy to load {@link Ext.data.Model Model} instances into a form - let's say we have a User model and want to load a particular instance into our form: * Ext.define('MyApp.model.User', { fields: ['name', 'email', 'password'] }); * var ed = Ext.create('MyApp.model.User', { name: 'Ed', email: 'ed@sencha.com', password: 'secret' }); * form.setRecord(ed); *

Retrieving form data

* Getting data out of the form panel is simple and is usually achieve vai the {@link #getValues} method: * var values = form.getValues(); * //values now looks like this: { name: 'Ed', email: 'ed@sencha.com', password: 'secret' } * It's also possible to listen to the change events on individual fields to get more timely notification of changes that the user is making. Here we expand on the example above with the User model, updating the model as soon as any of the fields are changed: * var form = Ext.create('Ext.form.Panel', { listeners: { '> field': { change: function(field, newValue, oldValue) { ed.set(field.getName(), newValue); } } }, items: //as before }); * The above used a new capability of Touch 2.0, which enables you to specify listeners on child components of any container. In this case, we attached a listener to the {@link Ext.field.Text#change change} event of each form field that is a direct child of the form panel. Our listener gets the name of the field that fired the change event, and updates our {@link Ext.data.Model Model} instance with the new value. For example, changing the email field in the form will update the Model's email field. *

Submitting forms

* There are a few ways to submit form data. In our example above we have a Model instance that we have updated, giving us the option to use the Model's {@link Ext.data.Model#save save} method to persist the changes back to our server, without using a traditional form submission. Alternatively, we can send a normal browser form submit using the {@link #submit} method: * form.submit({ url: 'url/to/submit/to', method: 'POST', success: function() { alert('form submitted successfully!'); } }); * In this case we provided the url to submit the form to inside the submit call - alternatively you can just set the {@link #url} configuration when you create the form. We can specify other parameters (see {@link #submit} for a full list), including callback functions for success and failure, which are called depending on whether or not the form submission was successful. These functions are usually used to take some action in your app after your data has been saved to the server side.
Record Loads matching fields from a model instance into this form @param {Ext.data.Model} instance The model instance @return {Ext.form.Panel} This form
Values Sets the values of form fields in bulk. Example usage: * myForm.setValues({ name: 'Ed', crazy: true, username: 'edspencer' }); * If there groups of checkbox fields with the same name, pass their values in an array. For example: * myForm.setValues({ name: 'Jacky', crazy: false, hobbies: [ 'reading', 'cooking', 'gaming' ] }); * @param {Object} values field name => value mapping object @return {Ext.form.Panel} This form
xtype

Methods

Name Description
applyWaitTpl(object) Initializes the renderTpl. @return {Ext.XTemplate} The renderTpl XTemplate instance. @private
disable() A convenient method to disable all fields in this forms @return {Ext.form.Panel} This form
enable() A convenient method to enable all fields in this forms @return {Ext.form.Panel} This form
getFields(object) @private Returns all {@link Ext.Field field} instances inside this form @param byName return only fields that match the given name, otherwise return all fields. @return {Object/Array} All field instances, mapped by field name; or an array if byName is passed
getFieldsAsArray()
getValues(bool) Returns an object containing the value of each field in the form, keyed to the field's name. For groups of checkbox fields with the same name, it will be arrays of values. For examples:
  
{
name: "Jacky Nguyen", // From a TextField
favorites: [
'pizza',
'noodle',
'cake'
]
}
            
@param {Boolean} enabled true to return only enabled fields @return {Object} Object mapping field name to its value
hideMask() Hides a previously shown wait mask (See {@link #showMask}) @return {Ext.form.Panel} this
initialize()
onFieldAction(object)
onSubmit(object)
reset() Resets all fields in the form back to their original values @return {Ext.form.Panel} This form
setRecord(Model) Loads matching fields from a model instance into this form @param {Ext.data.Model} instance The model instance @return {Ext.form.Panel} This form
setValues(object) Sets the values of form fields in bulk. Example usage: * myForm.setValues({ name: 'Ed', crazy: true, username: 'edspencer' }); * If there groups of checkbox fields with the same name, pass their values in an array. For example: * myForm.setValues({ name: 'Jacky', crazy: false, hobbies: [ 'reading', 'cooking', 'gaming' ] }); * @param {Object} values field name => value mapping object @return {Ext.form.Panel} This form
showMask(object, object) Shows a generic/custom mask over a designated Element. @param {String/Object} cfg Either a string message or a configuration object supporting the following options: * { message : 'Please Wait', transparent : false, target : Ext.getBody(), //optional target Element cls : 'form-mask', customImageUrl : 'trident.jpg' } * This object is passed to the {@link #waitTpl} for use with a custom masking implementation. @param {String/HTMLElement/Ext.Element} target The target Element instance or Element id to use as the masking agent for the operation (defaults the container Element of the component) @return {Ext.form.Panel} This form
submit(object) Performs a Ajax-based submission of form values (if standardSubmit is false) or otherwise executes a standard HTML Form submit action. @param {Object} options Unless otherwise noted, options may include the following:
  • url : String
    The url for the action (defaults to the form's {@link #url url}.)
  • *
  • method : String
    The form method to use (defaults to the form's method, or POST if not defined)
  • *
  • params : String/Object
    The params to pass (defaults to the FormPanel's baseParams, or none if not defined) Parameters are encoded as standard HTTP parameters using {@link Ext#urlEncode}.
  • *
  • headers : Object
    Request headers to set for the action (defaults to the form's default headers)
  • *
  • autoAbort : Boolean
    true to abort any pending Ajax request prior to submission (defaults to false) Note: Has no effect when standardSubmit is enabled.
  • *
  • submitDisabled : Boolean
    true to submit all fields regardless of disabled state (defaults to false) Note: Has no effect when standardSubmit is enabled.
  • *
  • waitMsg : String/Config
    If specified, the value is applied to the {@link #waitTpl} if defined, and rendered to the {@link #maskTarget} prior to a Form submit action.
  • *
  • success: function
    The callback that will be invoked after a successful response. A response is successful if a response is received from the server and is a JSON object where the success property is set to true, {"success": true} * The function is passed the following parameters:
    • form : Ext.form.Panel The form that requested the action
    • result : The result object returned by the server as a result of the submit request.
  • *
  • failure: function
    The callback that will be invoked after a failed transaction attempt. The function is passed the following parameters:
    • form : The Ext.form.Panel that requested the submit.
    • result : The failed response or result object returned by the server which performed the operation.
  • *
  • scope : Object
    The scope in which to call the callback functions (The this reference for the callback functions).
* @return {Ext.data.Connection} The request object
updateRecord(Model, bool) Updates a model instance with the current values of this form @param {Ext.data.Model} instance The model instance @param {Boolean} enabled true to update the Model with values from enabled fields only @return {Ext.form.Panel} This form
© Copyright 2005-2011 SharpKit. All rights reserved.