X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/ee06f37b0f6f6d94cd05a6ffae556660f7c4a2bc..c930e9176a5a85509c5b0230e2bff5c22a591432:/src/widgets/form/Form.js?ds=sidebyside
diff --git a/src/widgets/form/Form.js b/src/widgets/form/Form.js
new file mode 100644
index 00000000..78359d0a
--- /dev/null
+++ b/src/widgets/form/Form.js
@@ -0,0 +1,335 @@
+/*!
+ * Ext JS Library 3.0.0
+ * Copyright(c) 2006-2009 Ext JS, LLC
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
+/**
+ * @class Ext.form.FormPanel
+ * @extends Ext.Panel
+ *
Standard form container.
+ *
+ * Layout
+ * By default, FormPanel is configured with layout:'form' to use an {@link Ext.layout.FormLayout}
+ * layout manager, which styles and renders fields and labels correctly. When nesting additional Containers
+ * within a FormPanel, you should ensure that any descendant Containers which host input Fields use the
+ * {@link Ext.layout.FormLayout} layout manager.
+ *
+ * BasicForm
+ * Although not listed as configuration options of FormPanel, the FormPanel class accepts all
+ * of the config options required to configure its internal {@link Ext.form.BasicForm} for:
+ *
+ * - {@link Ext.form.BasicForm#fileUpload file uploads}
+ * - functionality for {@link Ext.form.BasicForm#doAction loading, validating and submitting} the form
+ *
+ *
+ * Note: If subclassing FormPanel, any configuration options for the BasicForm must be applied to
+ * the initialConfig property of the FormPanel. Applying {@link Ext.form.BasicForm BasicForm}
+ * configuration settings to this will not affect the BasicForm's configuration.
+ *
+ * Form Validation
+ * For information on form validation see the following:
+ *
+ * - {@link Ext.form.TextField}
+ * - {@link Ext.form.VTypes}
+ * - {@link Ext.form.BasicForm#doAction BasicForm.doAction clientValidation notes}
+ * - {@link Ext.form.FormPanel#monitorValid monitorValid}
+ *
+ *
+ * Form Submission
+ * By default, Ext Forms are submitted through Ajax, using {@link Ext.form.Action}. To enable normal browser
+ * submission of the {@link Ext.form.BasicForm BasicForm} contained in this FormPanel, see the
+ * {@link Ext.form.BasicForm#standardSubmit standardSubmit} option.
+ *
+ * @constructor
+ * @param {Object} config Configuration options
+ * @xtype form
+ */
+Ext.FormPanel = Ext.extend(Ext.Panel, {
+ /**
+ * @cfg {String} formId (optional) The id of the FORM tag (defaults to an auto-generated id).
+ */
+ /**
+ * @cfg {Boolean} hideLabels
+ * true to hide field labels by default (sets display:none). Defaults to
+ * false.
+ * Also see {@link Ext.Component}.{@link Ext.Component#hideLabel hideLabel}.
+ */
+ /**
+ * @cfg {Number} labelPad
+ * The default padding in pixels for field labels (defaults to 5). labelPad only
+ * applies if {@link #labelWidth} is also specified, otherwise it will be ignored.
+ */
+ /**
+ * @cfg {String} labelSeparator
+ * See {@link Ext.Component}.{@link Ext.Component#labelSeparator labelSeparator}
+ */
+ /**
+ * @cfg {Number} labelWidth The width of labels in pixels. This property cascades to child containers
+ * and can be overridden on any child container (e.g., a fieldset can specify a different labelWidth
+ * for its fields) (defaults to 100).
+ */
+ /**
+ * @cfg {String} itemCls A css class to apply to the x-form-item of fields. This property cascades to child containers.
+ */
+ /**
+ * @cfg {Array} buttons
+ * An array of {@link Ext.Button}s or {@link Ext.Button} configs used to add buttons to the footer of this FormPanel.
+ *
Buttons in the footer of a FormPanel may be configured with the option formBind: true. This causes
+ * the form's {@link #monitorValid valid state monitor task} to enable/disable those Buttons depending on
+ * the form's valid/invalid state.
+ */
+
+
+ /**
+ * @cfg {Number} minButtonWidth Minimum width of all buttons in pixels (defaults to 75).
+ */
+ minButtonWidth : 75,
+
+ /**
+ * @cfg {String} labelAlign The label alignment value used for the text-align specification
+ * for the container. Valid values are "left", "top" or "right"
+ * (defaults to "left"). This property cascades to child containers and can be
+ * overridden on any child container (e.g., a fieldset can specify a different labelAlign
+ * for its fields).
+ */
+ labelAlign : 'left',
+
+ /**
+ * @cfg {Boolean} monitorValid If true, the form monitors its valid state client-side and
+ * regularly fires the {@link #clientvalidation} event passing that state.
+ * When monitoring valid state, the FormPanel enables/disables any of its configured
+ * {@link #buttons} which have been configured with formBind: true
depending
+ * on whether the {@link Ext.form.BasicForm#isValid form is valid} or not. Defaults to false
+ */
+ monitorValid : false,
+
+ /**
+ * @cfg {Number} monitorPoll The milliseconds to poll valid state, ignored if monitorValid is not true (defaults to 200)
+ */
+ monitorPoll : 200,
+
+ /**
+ * @cfg {String} layout Defaults to 'form'. Normally this configuration property should not be altered.
+ * For additional details see {@link Ext.layout.FormLayout} and {@link Ext.Container#layout Ext.Container.layout}.
+ */
+ layout : 'form',
+
+ // private
+ initComponent : function(){
+ this.form = this.createForm();
+ Ext.FormPanel.superclass.initComponent.call(this);
+
+ this.bodyCfg = {
+ tag: 'form',
+ cls: this.baseCls + '-body',
+ method : this.method || 'POST',
+ id : this.formId || Ext.id()
+ };
+ if(this.fileUpload) {
+ this.bodyCfg.enctype = 'multipart/form-data';
+ }
+ this.initItems();
+
+ this.addEvents(
+ /**
+ * @event clientvalidation
+ * If the monitorValid config option is true, this event fires repetitively to notify of valid state
+ * @param {Ext.form.FormPanel} this
+ * @param {Boolean} valid true if the form has passed client-side validation
+ */
+ 'clientvalidation'
+ );
+
+ this.relayEvents(this.form, ['beforeaction', 'actionfailed', 'actioncomplete']);
+ },
+
+ // private
+ createForm : function(){
+ var config = Ext.applyIf({listeners: {}}, this.initialConfig);
+ return new Ext.form.BasicForm(null, config);
+ },
+
+ // private
+ initFields : function(){
+ var f = this.form;
+ var formPanel = this;
+ var fn = function(c){
+ if(formPanel.isField(c)){
+ f.add(c);
+ }if(c.isFieldWrap){
+ Ext.applyIf(c, {
+ labelAlign: c.ownerCt.labelAlign,
+ labelWidth: c.ownerCt.labelWidth,
+ itemCls: c.ownerCt.itemCls
+ });
+ f.add(c.field);
+ }else if(c.doLayout && c != formPanel){
+ Ext.applyIf(c, {
+ labelAlign: c.ownerCt.labelAlign,
+ labelWidth: c.ownerCt.labelWidth,
+ itemCls: c.ownerCt.itemCls
+ });
+ //each check required for check/radio groups.
+ if(c.items && c.items.each){
+ c.items.each(fn, this);
+ }
+ }
+ };
+ this.items.each(fn, this);
+ },
+
+ // private
+ getLayoutTarget : function(){
+ return this.form.el;
+ },
+
+ /**
+ * Provides access to the {@link Ext.form.BasicForm Form} which this Panel contains.
+ * @return {Ext.form.BasicForm} The {@link Ext.form.BasicForm Form} which this Panel contains.
+ */
+ getForm : function(){
+ return this.form;
+ },
+
+ // private
+ onRender : function(ct, position){
+ this.initFields();
+ Ext.FormPanel.superclass.onRender.call(this, ct, position);
+ this.form.initEl(this.body);
+ },
+
+ // private
+ beforeDestroy : function(){
+ this.stopMonitoring();
+ Ext.FormPanel.superclass.beforeDestroy.call(this);
+ /*
+ * Clear the items here to prevent them being destroyed again.
+ * Don't move this behaviour to BasicForm because it can be used
+ * on it's own.
+ */
+ this.form.items.clear();
+ Ext.destroy(this.form);
+ },
+
+ // Determine if a Component is usable as a form Field.
+ isField : function(c) {
+ return !!c.setValue && !!c.getValue && !!c.markInvalid && !!c.clearInvalid;
+ },
+
+ // private
+ initEvents : function(){
+ Ext.FormPanel.superclass.initEvents.call(this);
+ this.on('remove', this.onRemove, this);
+ this.on('add', this.onAdd, this);
+ if(this.monitorValid){ // initialize after render
+ this.startMonitoring();
+ }
+ },
+
+ // private
+ onAdd : function(ct, c) {
+ // If a single form Field, add it
+ if (this.isField(c)) {
+ this.form.add(c);
+ // If a Container, add any Fields it might contain
+ } else if (c.findBy) {
+ Ext.applyIf(c, {
+ labelAlign: c.ownerCt.labelAlign,
+ labelWidth: c.ownerCt.labelWidth,
+ itemCls: c.ownerCt.itemCls
+ });
+ this.form.add.apply(this.form, c.findBy(this.isField));
+ }
+ },
+
+ // private
+ onRemove : function(ct, c) {
+ // If a single form Field, remove it
+ if (this.isField(c)) {
+ Ext.destroy(c.container.up('.x-form-item'));
+ this.form.remove(c);
+ // If a Container, remove any Fields it might contain
+ } else if (c.findByType) {
+ Ext.each(c.findBy(this.isField), this.form.remove, this.form);
+ }
+ },
+
+ /**
+ * Starts monitoring of the valid state of this form. Usually this is done by passing the config
+ * option "monitorValid"
+ */
+ startMonitoring : function(){
+ if(!this.validTask){
+ this.validTask = new Ext.util.TaskRunner();
+ this.validTask.start({
+ run : this.bindHandler,
+ interval : this.monitorPoll || 200,
+ scope: this
+ });
+ }
+ },
+
+ /**
+ * Stops monitoring of the valid state of this form
+ */
+ stopMonitoring : function(){
+ if(this.validTask){
+ this.validTask.stopAll();
+ this.validTask = null;
+ }
+ },
+
+ /**
+ * This is a proxy for the underlying BasicForm's {@link Ext.form.BasicForm#load} call.
+ * @param {Object} options The options to pass to the action (see {@link Ext.form.BasicForm#doAction} for details)
+ */
+ load : function(){
+ this.form.load.apply(this.form, arguments);
+ },
+
+ // private
+ onDisable : function(){
+ Ext.FormPanel.superclass.onDisable.call(this);
+ if(this.form){
+ this.form.items.each(function(){
+ this.disable();
+ });
+ }
+ },
+
+ // private
+ onEnable : function(){
+ Ext.FormPanel.superclass.onEnable.call(this);
+ if(this.form){
+ this.form.items.each(function(){
+ this.enable();
+ });
+ }
+ },
+
+ // private
+ bindHandler : function(){
+ var valid = true;
+ this.form.items.each(function(f){
+ if(!f.isValid(true)){
+ valid = false;
+ return false;
+ }
+ });
+ if(this.fbar){
+ var fitems = this.fbar.items.items;
+ for(var i = 0, len = fitems.length; i < len; i++){
+ var btn = fitems[i];
+ if(btn.formBind === true && btn.disabled === valid){
+ btn.setDisabled(!valid);
+ }
+ }
+ }
+ this.fireEvent('clientvalidation', this, valid);
+ }
+});
+Ext.reg('form', Ext.FormPanel);
+
+Ext.form.FormPanel = Ext.FormPanel;
+