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

中间件编程

开发平台:

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.layout.FormLayout
  9.  * @extends Ext.layout.AnchorLayout
  10.  * <p>This layout manager is specifically designed for rendering and managing child Components of
  11.  * {@link Ext.form.FormPanel forms}. It is responsible for rendering the labels of
  12.  * {@link Ext.form.Field Field}s.</p>
  13.  *
  14.  * <p>This layout manager is used when a Container is configured with the <tt>layout:'form'</tt>
  15.  * {@link Ext.Container#layout layout} config option, and should generally not need to be created directly
  16.  * via the new keyword. See <tt><b>{@link Ext.Container#layout}</b></tt> for additional details.</p>
  17.  *
  18.  * <p>In an application, it will usually be preferrable to use a {@link Ext.form.FormPanel FormPanel}
  19.  * (which is configured with FormLayout as its layout class by default) since it also provides built-in
  20.  * functionality for {@link Ext.form.BasicForm#doAction loading, validating and submitting} the form.</p>
  21.  *
  22.  * <p>A {@link Ext.Container Container} <i>using</i> the FormLayout layout manager (e.g.
  23.  * {@link Ext.form.FormPanel} or specifying <tt>layout:'form'</tt>) can also accept the following
  24.  * layout-specific config properties:<div class="mdetail-params"><ul>
  25.  * <li><b><tt>{@link Ext.form.FormPanel#hideLabels hideLabels}</tt></b></li>
  26.  * <li><b><tt>{@link Ext.form.FormPanel#labelAlign labelAlign}</tt></b></li>
  27.  * <li><b><tt>{@link Ext.form.FormPanel#labelPad labelPad}</tt></b></li>
  28.  * <li><b><tt>{@link Ext.form.FormPanel#labelSeparator labelSeparator}</tt></b></li>
  29.  * <li><b><tt>{@link Ext.form.FormPanel#labelWidth labelWidth}</tt></b></li>
  30.  * </ul></div></p>
  31.  *
  32.  * <p>Any Component (including Fields) managed by FormLayout accepts the following as a config option:
  33.  * <div class="mdetail-params"><ul>
  34.  * <li><b><tt>{@link Ext.Component#anchor anchor}</tt></b></li>
  35.  * </ul></div></p>
  36.  *
  37.  * <p>Any Component managed by FormLayout may be rendered as a form field (with an associated label) by
  38.  * configuring it with a non-null <b><tt>{@link Ext.Component#fieldLabel fieldLabel}</tt></b>. Components configured
  39.  * in this way may be configured with the following options which affect the way the FormLayout renders them:
  40.  * <div class="mdetail-params"><ul>
  41.  * <li><b><tt>{@link Ext.Component#clearCls clearCls}</tt></b></li>
  42.  * <li><b><tt>{@link Ext.Component#fieldLabel fieldLabel}</tt></b></li>
  43.  * <li><b><tt>{@link Ext.Component#hideLabel hideLabel}</tt></b></li>
  44.  * <li><b><tt>{@link Ext.Component#itemCls itemCls}</tt></b></li>
  45.  * <li><b><tt>{@link Ext.Component#labelSeparator labelSeparator}</tt></b></li>
  46.  * <li><b><tt>{@link Ext.Component#labelStyle labelStyle}</tt></b></li>
  47.  * </ul></div></p>
  48.  *
  49.  * <p>Example usage:</p>
  50.  * <pre><code>
  51. // Required if showing validation messages
  52. Ext.QuickTips.init();
  53. // While you can create a basic Panel with layout:'form', practically
  54. // you should usually use a FormPanel to also get its form functionality
  55. // since it already creates a FormLayout internally.
  56. var form = new Ext.form.FormPanel({
  57.     title: 'Form Layout',
  58.     bodyStyle: 'padding:15px',
  59.     width: 350,
  60.     defaultType: 'textfield',
  61.     defaults: {
  62.         // applied to each contained item
  63.         width: 230,
  64.         msgTarget: 'side'
  65.     },
  66.     items: [{
  67.             fieldLabel: 'First Name',
  68.             name: 'first',
  69.             allowBlank: false,
  70.             {@link Ext.Component#labelSeparator labelSeparator}: ':' // override labelSeparator layout config
  71.         },{
  72.             fieldLabel: 'Last Name',
  73.             name: 'last'
  74.         },{
  75.             fieldLabel: 'Email',
  76.             name: 'email',
  77.             vtype:'email'
  78.         }, {
  79.             xtype: 'textarea',
  80.             hideLabel: true,     // override hideLabels layout config
  81.             name: 'msg',
  82.             anchor: '100% -53'
  83.         }
  84.     ],
  85.     buttons: [
  86.         {text: 'Save'},
  87.         {text: 'Cancel'}
  88.     ],
  89.     layoutConfig: {
  90.         {@link #labelSeparator}: '~' // superseded by assignment below
  91.     },
  92.     // config options applicable to container when layout='form':
  93.     hideLabels: false,
  94.     labelAlign: 'left',   // or 'right' or 'top'
  95.     {@link Ext.form.FormPanel#labelSeparator labelSeparator}: '>>', // takes precedence over layoutConfig value
  96.     labelWidth: 65,       // defaults to 100
  97.     labelPad: 8           // defaults to 5, must specify labelWidth to be honored
  98. });
  99. </code></pre>
  100.  */
  101. Ext.layout.FormLayout = Ext.extend(Ext.layout.AnchorLayout, {
  102.     /**
  103.      * @cfg {String} labelSeparator
  104.      * See {@link Ext.form.FormPanel}.{@link Ext.form.FormPanel#labelSeparator labelSeparator}.  Configuration
  105.      * of this property at the <b>container</b> level takes precedence.
  106.      */
  107.     labelSeparator : ':',
  108.     /**
  109.      * Read only. The CSS style specification string added to field labels in this layout if not
  110.      * otherwise {@link Ext.Component#labelStyle specified by each contained field}.
  111.      * @type String
  112.      * @property labelStyle
  113.      */
  114.     // private
  115.     setContainer : function(ct){
  116.         Ext.layout.FormLayout.superclass.setContainer.call(this, ct);
  117.         if(ct.labelAlign){
  118.             ct.addClass('x-form-label-'+ct.labelAlign);
  119.         }
  120.         if(ct.hideLabels){
  121.             this.labelStyle = "display:none";
  122.             this.elementStyle = "padding-left:0;";
  123.             this.labelAdjust = 0;
  124.         }else{
  125.             this.labelSeparator = ct.labelSeparator || this.labelSeparator;
  126.             ct.labelWidth = ct.labelWidth || 100;
  127.             if(typeof ct.labelWidth == 'number'){
  128.                 var pad = (typeof ct.labelPad == 'number' ? ct.labelPad : 5);
  129.                 this.labelAdjust = ct.labelWidth+pad;
  130.                 this.labelStyle = "width:"+ct.labelWidth+"px;";
  131.                 this.elementStyle = "padding-left:"+(ct.labelWidth+pad)+'px';
  132.             }
  133.             if(ct.labelAlign == 'top'){
  134.                 this.labelStyle = "width:auto;";
  135.                 this.labelAdjust = 0;
  136.                 this.elementStyle = "padding-left:0;";
  137.             }
  138.         }
  139.     },
  140.     //private
  141.     getLabelStyle: function(s){
  142.         var ls = '', items = [this.labelStyle, s];
  143.         for (var i = 0, len = items.length; i < len; ++i){
  144.             if (items[i]){
  145.                 ls += items[i];
  146.                 if (ls.substr(-1, 1) != ';'){
  147.                     ls += ';'
  148.                 }
  149.             }
  150.         }
  151.         return ls;
  152.     },
  153.     /**
  154.      * @cfg {Ext.Template} fieldTpl
  155.      * A {@link Ext.Template#compile compile}d {@link Ext.Template} for rendering
  156.      * the fully wrapped, labeled and styled form Field. Defaults to:</p><pre><code>
  157. new Ext.Template(
  158.     &#39;&lt;div class="x-form-item {itemCls}" tabIndex="-1">&#39;,
  159.         &#39;&lt;&#108;abel for="{id}" style="{labelStyle}" class="x-form-item-&#108;abel">{&#108;abel}{labelSeparator}&lt;/&#108;abel>&#39;,
  160.         &#39;&lt;div class="x-form-element" id="x-form-el-{id}" style="{elementStyle}">&#39;,
  161.         &#39;&lt;/div>&lt;div class="{clearCls}">&lt;/div>&#39;,
  162.     '&lt;/div>'
  163. );
  164. </code></pre>
  165.      * <p>This may be specified to produce a different DOM structure when rendering form Fields.</p>
  166.      * <p>A description of the properties within the template follows:</p><div class="mdetail-params"><ul>
  167.      * <li><b><tt>itemCls</tt></b> : String<div class="sub-desc">The CSS class applied to the outermost div wrapper
  168.      * that contains this field label and field element (the default class is <tt>'x-form-item'</tt> and <tt>itemCls</tt>
  169.      * will be added to that). If supplied, <tt>itemCls</tt> at the field level will override the default <tt>itemCls</tt>
  170.      * supplied at the container level.</div></li>
  171.      * <li><b><tt>id</tt></b> : String<div class="sub-desc">The id of the Field</div></li>
  172.      * <li><b><tt>{@link #labelStyle}</tt></b> : String<div class="sub-desc">
  173.      * A CSS style specification string to add to the field label for this field (defaults to <tt>''</tt> or the
  174.      * {@link #labelStyle layout's value for <tt>labelStyle</tt>}).</div></li>
  175.      * <li><b><tt>label</tt></b> : String<div class="sub-desc">The text to display as the label for this
  176.      * field (defaults to <tt>''</tt>)</div></li>
  177.      * <li><b><tt>{@link #labelSeparator}</tt></b> : String<div class="sub-desc">The separator to display after
  178.      * the text of the label for this field (defaults to a colon <tt>':'</tt> or the
  179.      * {@link #labelSeparator layout's value for labelSeparator}). To hide the separator use empty string ''.</div></li>
  180.      * <li><b><tt>elementStyle</tt></b> : String<div class="sub-desc">The styles text for the input element's wrapper.</div></li>
  181.      * <li><b><tt>clearCls</tt></b> : String<div class="sub-desc">The CSS class to apply to the special clearing div
  182.      * rendered directly after each form field wrapper (defaults to <tt>'x-form-clear-left'</tt>)</div></li>
  183.      * </ul></div>
  184.      * <p>Also see <tt>{@link #getTemplateArgs}</tt></p>
  185.      */
  186.     // private
  187.     renderItem : function(c, position, target){
  188.         if(c && !c.rendered && (c.isFormField || c.fieldLabel) && c.inputType != 'hidden'){
  189.             var args = this.getTemplateArgs(c);
  190.             if(typeof position == 'number'){
  191.                 position = target.dom.childNodes[position] || null;
  192.             }
  193.             if(position){
  194.                 this.fieldTpl.insertBefore(position, args);
  195.             }else{
  196.                 this.fieldTpl.append(target, args);
  197.             }
  198.             c.render('x-form-el-'+c.id);
  199.         }else {
  200.             Ext.layout.FormLayout.superclass.renderItem.apply(this, arguments);
  201.         }
  202.     },
  203.     /**
  204.      * <p>Provides template arguments for rendering the fully wrapped, labeled and styled form Field.</p>
  205.      * <p>This method returns an object hash containing properties used by the layout's {@link #fieldTpl}
  206.      * to create a correctly wrapped, labeled and styled form Field. This may be overriden to
  207.      * create custom layouts. The properties which must be returned are:</p><div class="mdetail-params"><ul>
  208.      * <li><b><tt>itemCls</tt></b> : String<div class="sub-desc">The CSS class applied to the outermost div wrapper
  209.      * that contains this field label and field element (the default class is <tt>'x-form-item'</tt> and <tt>itemCls</tt>
  210.      * will be added to that). If supplied, <tt>itemCls</tt> at the field level will override the default <tt>itemCls</tt>
  211.      * supplied at the container level.</div></li>
  212.      * <li><b><tt>id</tt></b> : String<div class="sub-desc">The id of the Field</div></li>
  213.      * <li><b><tt>{@link #labelStyle}</tt></b> : String<div class="sub-desc">
  214.      * A CSS style specification string to add to the field label for this field (defaults to <tt>''</tt> or the
  215.      * {@link #labelStyle layout's value for <tt>labelStyle</tt>}).</div></li>
  216.      * <li><b><tt>label</tt></b> : String<div class="sub-desc">The text to display as the label for this
  217.      * field (defaults to <tt>''</tt>)</div></li>
  218.      * <li><b><tt>{@link #labelSeparator}</tt></b> : String<div class="sub-desc">The separator to display after
  219.      * the text of the label for this field (defaults to a colon <tt>':'</tt> or the
  220.      * {@link #labelSeparator layout's value for labelSeparator}). To hide the separator use empty string ''.</div></li>
  221.      * <li><b><tt>elementStyle</tt></b> : String<div class="sub-desc">The styles text for the input element's wrapper.</div></li>
  222.      * <li><b><tt>clearCls</tt></b> : String<div class="sub-desc">The CSS class to apply to the special clearing div
  223.      * rendered directly after each form field wrapper (defaults to <tt>'x-form-clear-left'</tt>)</div></li>
  224.      * </ul></div>
  225.      * @param field The {@link Field Ext.form.Field} being rendered.
  226.      * @return An object hash containing the properties required to render the Field.
  227.      */
  228.     getTemplateArgs: function(field) {
  229.         var noLabelSep = !field.fieldLabel || field.hideLabel;
  230.         return {
  231.             id: field.id,
  232.             label: field.fieldLabel,
  233.             labelStyle: field.labelStyle||this.labelStyle||'',
  234.             elementStyle: this.elementStyle||'',
  235.             labelSeparator: noLabelSep ? '' : (typeof field.labelSeparator == 'undefined' ? this.labelSeparator : field.labelSeparator),
  236.             itemCls: (field.itemCls||this.container.itemCls||'') + (field.hideLabel ? ' x-hide-label' : ''),
  237.             clearCls: field.clearCls || 'x-form-clear-left'
  238.         };
  239.     },
  240.     // private
  241.     adjustWidthAnchor : function(value, comp){
  242.         return value - (comp.isFormField || comp.fieldLabel  ? (comp.hideLabel ? 0 : this.labelAdjust) : 0);
  243.     },
  244.     // private
  245.     isValidParent : function(c, target){
  246.         return true;
  247.     }
  248.     /**
  249.      * @property activeItem
  250.      * @hide
  251.      */
  252. });
  253. Ext.Container.LAYOUTS['form'] = Ext.layout.FormLayout;