Form.js
上传用户:shuoshiled
上传日期:2018-01-28
资源大小:10124k
文件大小:12k
源码类别:

中间件编程

开发平台:

JavaScript

  1. /*!
  2.  * Ext JS Library 3.0.0
  3.  * Copyright(c) 2006-2009 Ext JS, LLC
  4.  * licensing@extjs.com
  5.  * http://www.extjs.com/license
  6.  */
  7. /**
  8.  * @class Ext.form.FormPanel
  9.  * @extends Ext.Panel
  10.  * <p>Standard form container.</p>
  11.  * 
  12.  * <p><b><u>Layout</u></b></p>
  13.  * <p>By default, FormPanel is configured with <tt>layout:'form'</tt> to use an {@link Ext.layout.FormLayout}
  14.  * layout manager, which styles and renders fields and labels correctly. When nesting additional Containers
  15.  * within a FormPanel, you should ensure that any descendant Containers which host input Fields use the
  16.  * {@link Ext.layout.FormLayout} layout manager.</p>
  17.  * 
  18.  * <p><b><u>BasicForm</u></b></p>
  19.  * <p>Although <b>not listed</b> as configuration options of FormPanel, the FormPanel class accepts all
  20.  * of the config options required to configure its internal {@link Ext.form.BasicForm} for:
  21.  * <div class="mdetail-params"><ul>
  22.  * <li>{@link Ext.form.BasicForm#fileUpload file uploads}</li>
  23.  * <li>functionality for {@link Ext.form.BasicForm#doAction loading, validating and submitting} the form</li>
  24.  * </ul></div>
  25.  *  
  26.  * <p><b>Note</b>: If subclassing FormPanel, any configuration options for the BasicForm must be applied to
  27.  * the <tt><b>initialConfig</b></tt> property of the FormPanel. Applying {@link Ext.form.BasicForm BasicForm}
  28.  * configuration settings to <b><tt>this</tt></b> will <b>not</b> affect the BasicForm's configuration.</p>
  29.  * 
  30.  * <p><b><u>Form Validation</u></b></p>
  31.  * <p>For information on form validation see the following:</p>
  32.  * <div class="mdetail-params"><ul>
  33.  * <li>{@link Ext.form.TextField}</li>
  34.  * <li>{@link Ext.form.VTypes}</li>
  35.  * <li>{@link Ext.form.BasicForm#doAction BasicForm.doAction <b>clientValidation</b> notes}</li>
  36.  * <li><tt>{@link Ext.form.FormPanel#monitorValid monitorValid}</tt></li>
  37.  * </ul></div>
  38.  * 
  39.  * <p><b><u>Form Submission</u></b></p>
  40.  * <p>By default, Ext Forms are submitted through Ajax, using {@link Ext.form.Action}. To enable normal browser
  41.  * submission of the {@link Ext.form.BasicForm BasicForm} contained in this FormPanel, see the
  42.  * <tt><b>{@link Ext.form.BasicForm#standardSubmit standardSubmit}</b></tt> option.</p>
  43.  * 
  44.  * @constructor
  45.  * @param {Object} config Configuration options
  46.  * @xtype form
  47.  */
  48. Ext.FormPanel = Ext.extend(Ext.Panel, {
  49. /**
  50.  * @cfg {String} formId (optional) The id of the FORM tag (defaults to an auto-generated id).
  51.  */
  52.     /**
  53.      * @cfg {Boolean} hideLabels
  54.      * <p><tt>true</tt> to hide field labels by default (sets <tt>display:none</tt>). Defaults to
  55.      * <tt>false</tt>.</p>
  56.      * <p>Also see {@link Ext.Component}.<tt>{@link Ext.Component#hideLabel hideLabel}</tt>.
  57.      */
  58.     /**
  59.      * @cfg {Number} labelPad
  60.      * The default padding in pixels for field labels (defaults to <tt>5</tt>). <tt>labelPad</tt> only
  61.      * applies if <tt>{@link #labelWidth}</tt> is also specified, otherwise it will be ignored.
  62.      */
  63.     /**
  64.      * @cfg {String} labelSeparator
  65.      * See {@link Ext.Component}.<tt>{@link Ext.Component#labelSeparator labelSeparator}</tt>
  66.      */
  67.     /**
  68.      * @cfg {Number} labelWidth The width of labels in pixels. This property cascades to child containers
  69.      * and can be overridden on any child container (e.g., a fieldset can specify a different <tt>labelWidth</tt>
  70.      * for its fields) (defaults to <tt>100</tt>).
  71.      */
  72.     /**
  73.      * @cfg {String} itemCls A css class to apply to the x-form-item of fields. This property cascades to child containers.
  74.      */
  75.     /**
  76.      * @cfg {Array} buttons
  77.      * An array of {@link Ext.Button}s or {@link Ext.Button} configs used to add buttons to the footer of this FormPanel.<br>
  78.      * <p>Buttons in the footer of a FormPanel may be configured with the option <tt>formBind: true</tt>. This causes
  79.      * the form's {@link #monitorValid valid state monitor task} to enable/disable those Buttons depending on
  80.      * the form's valid/invalid state.</p>
  81.      */
  82.     /**
  83.      * @cfg {Number} minButtonWidth Minimum width of all buttons in pixels (defaults to <tt>75</tt>).
  84.      */
  85.     minButtonWidth : 75,
  86.     /**
  87.      * @cfg {String} labelAlign The label alignment value used for the <tt>text-align</tt> specification
  88.      * for the <b>container</b>. Valid values are <tt>"left</tt>", <tt>"top"</tt> or <tt>"right"</tt>
  89.      * (defaults to <tt>"left"</tt>). This property cascades to child <b>containers</b> and can be
  90.      * overridden on any child <b>container</b> (e.g., a fieldset can specify a different <tt>labelAlign</tt>
  91.      * for its fields).
  92.      */
  93.     labelAlign : 'left',
  94.     /**
  95.      * @cfg {Boolean} monitorValid If <tt>true</tt>, the form monitors its valid state <b>client-side</b> and
  96.      * regularly fires the {@link #clientvalidation} event passing that state.<br>
  97.      * <p>When monitoring valid state, the FormPanel enables/disables any of its configured
  98.      * {@link #buttons} which have been configured with <code>formBind: true</code> depending
  99.      * on whether the {@link Ext.form.BasicForm#isValid form is valid} or not. Defaults to <tt>false</tt></p>
  100.      */
  101.     monitorValid : false,
  102.     /**
  103.      * @cfg {Number} monitorPoll The milliseconds to poll valid state, ignored if monitorValid is not true (defaults to 200)
  104.      */
  105.     monitorPoll : 200,
  106.     /**
  107.      * @cfg {String} layout Defaults to <tt>'form'</tt>.  Normally this configuration property should not be altered. 
  108.      * For additional details see {@link Ext.layout.FormLayout} and {@link Ext.Container#layout Ext.Container.layout}.
  109.      */
  110.     layout : 'form',
  111.     // private
  112.     initComponent : function(){
  113.         this.form = this.createForm();
  114.         Ext.FormPanel.superclass.initComponent.call(this);
  115.         this.bodyCfg = {
  116.             tag: 'form',
  117.             cls: this.baseCls + '-body',
  118.             method : this.method || 'POST',
  119.             id : this.formId || Ext.id()
  120.         };
  121.         if(this.fileUpload) {
  122.             this.bodyCfg.enctype = 'multipart/form-data';
  123.         }
  124.         this.initItems();
  125.         
  126.         this.addEvents(
  127.             /**
  128.              * @event clientvalidation
  129.              * If the monitorValid config option is true, this event fires repetitively to notify of valid state
  130.              * @param {Ext.form.FormPanel} this
  131.              * @param {Boolean} valid true if the form has passed client-side validation
  132.              */
  133.             'clientvalidation'
  134.         );
  135.         this.relayEvents(this.form, ['beforeaction', 'actionfailed', 'actioncomplete']);
  136.     },
  137.     // private
  138.     createForm : function(){
  139.         var config = Ext.applyIf({listeners: {}}, this.initialConfig);
  140.         return new Ext.form.BasicForm(null, config);
  141.     },
  142.     // private
  143.     initFields : function(){
  144.         var f = this.form;
  145.         var formPanel = this;
  146.         var fn = function(c){
  147.             if(formPanel.isField(c)){
  148.                 f.add(c);
  149.             }if(c.isFieldWrap){
  150.                 Ext.applyIf(c, {
  151.                     labelAlign: c.ownerCt.labelAlign,
  152.                     labelWidth: c.ownerCt.labelWidth,
  153.                     itemCls: c.ownerCt.itemCls
  154.                 });
  155.                 f.add(c.field);
  156.             }else if(c.doLayout && c != formPanel){
  157.                 Ext.applyIf(c, {
  158.                     labelAlign: c.ownerCt.labelAlign,
  159.                     labelWidth: c.ownerCt.labelWidth,
  160.                     itemCls: c.ownerCt.itemCls
  161.                 });
  162.                 //each check required for check/radio groups.
  163.                 if(c.items && c.items.each){
  164.                     c.items.each(fn, this);
  165.                 }
  166.             }
  167.         };
  168.         this.items.each(fn, this);
  169.     },
  170.     // private
  171.     getLayoutTarget : function(){
  172.         return this.form.el;
  173.     },
  174.     /**
  175.      * Provides access to the {@link Ext.form.BasicForm Form} which this Panel contains.
  176.      * @return {Ext.form.BasicForm} The {@link Ext.form.BasicForm Form} which this Panel contains.
  177.      */
  178.     getForm : function(){
  179.         return this.form;
  180.     },
  181.     // private
  182.     onRender : function(ct, position){
  183.         this.initFields();
  184.         Ext.FormPanel.superclass.onRender.call(this, ct, position);
  185.         this.form.initEl(this.body);
  186.     },
  187.     
  188.     // private
  189.     beforeDestroy : function(){
  190.         this.stopMonitoring();
  191.         Ext.FormPanel.superclass.beforeDestroy.call(this);
  192.         /*
  193.          * Clear the items here to prevent them being destroyed again.
  194.          * Don't move this behaviour to BasicForm because it can be used
  195.          * on it's own.
  196.          */
  197.         this.form.items.clear();
  198.         Ext.destroy(this.form);
  199.     },
  200. // Determine if a Component is usable as a form Field.
  201.     isField : function(c) {
  202.         return !!c.setValue && !!c.getValue && !!c.markInvalid && !!c.clearInvalid;
  203.     },
  204.     // private
  205.     initEvents : function(){
  206.         Ext.FormPanel.superclass.initEvents.call(this);
  207.         this.on('remove', this.onRemove, this);
  208.         this.on('add', this.onAdd, this);
  209.         if(this.monitorValid){ // initialize after render
  210.             this.startMonitoring();
  211.         }
  212.     },
  213.     
  214.     // private
  215.     onAdd : function(ct, c) {
  216. // If a single form Field, add it
  217.         if (this.isField(c)) {
  218.             this.form.add(c);
  219. // If a Container, add any Fields it might contain
  220.         } else if (c.findBy) {
  221.             Ext.applyIf(c, {
  222.                 labelAlign: c.ownerCt.labelAlign,
  223.                 labelWidth: c.ownerCt.labelWidth,
  224.                 itemCls: c.ownerCt.itemCls
  225.             });
  226.             this.form.add.apply(this.form, c.findBy(this.isField));
  227.         }
  228.     },
  229.     // private
  230.     onRemove : function(ct, c) {
  231. // If a single form Field, remove it
  232.         if (this.isField(c)) {
  233.             Ext.destroy(c.container.up('.x-form-item'));
  234.          this.form.remove(c);
  235. // If a Container, remove any Fields it might contain
  236.         } else if (c.findByType) {
  237.             Ext.each(c.findBy(this.isField), this.form.remove, this.form);
  238.         }
  239.     },
  240.     /**
  241.      * Starts monitoring of the valid state of this form. Usually this is done by passing the config
  242.      * option "monitorValid"
  243.      */
  244.     startMonitoring : function(){
  245.         if(!this.validTask){
  246.             this.validTask = new Ext.util.TaskRunner();
  247.             this.validTask.start({
  248.                 run : this.bindHandler,
  249.                 interval : this.monitorPoll || 200,
  250.                 scope: this
  251.             });
  252.         }
  253.     },
  254.     /**
  255.      * Stops monitoring of the valid state of this form
  256.      */
  257.     stopMonitoring : function(){
  258.         if(this.validTask){
  259.             this.validTask.stopAll();
  260.             this.validTask = null;
  261.         }
  262.     },
  263.     /**
  264.      * This is a proxy for the underlying BasicForm's {@link Ext.form.BasicForm#load} call.
  265.      * @param {Object} options The options to pass to the action (see {@link Ext.form.BasicForm#doAction} for details)
  266.      */
  267.     load : function(){
  268.         this.form.load.apply(this.form, arguments);  
  269.     },
  270.     // private
  271.     onDisable : function(){
  272.         Ext.FormPanel.superclass.onDisable.call(this);
  273.         if(this.form){
  274.             this.form.items.each(function(){
  275.                  this.disable();
  276.             });
  277.         }
  278.     },
  279.     // private
  280.     onEnable : function(){
  281.         Ext.FormPanel.superclass.onEnable.call(this);
  282.         if(this.form){
  283.             this.form.items.each(function(){
  284.                  this.enable();
  285.             });
  286.         }
  287.     },
  288.     // private
  289.     bindHandler : function(){
  290.         var valid = true;
  291.         this.form.items.each(function(f){
  292.             if(!f.isValid(true)){
  293.                 valid = false;
  294.                 return false;
  295.             }
  296.         });
  297.         if(this.fbar){
  298.             var fitems = this.fbar.items.items;
  299.             for(var i = 0, len = fitems.length; i < len; i++){
  300.                 var btn = fitems[i];
  301.                 if(btn.formBind === true && btn.disabled === valid){
  302.                     btn.setDisabled(!valid);
  303.                 }
  304.             }
  305.         }
  306.         this.fireEvent('clientvalidation', this, valid);
  307.     }
  308. });
  309. Ext.reg('form', Ext.FormPanel);
  310. Ext.form.FormPanel = Ext.FormPanel;