X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/d41dc04ad17d1d9125fb2cf72db2b4782dbe3a8c..c8256059947f3aa8f5b0a9a2acf55e2142bb4742:/docs/output/Ext.layout.FormLayout.html diff --git a/docs/output/Ext.layout.FormLayout.html b/docs/output/Ext.layout.FormLayout.html index cb36965c..83134ffb 100644 --- a/docs/output/Ext.layout.FormLayout.html +++ b/docs/output/Ext.layout.FormLayout.html @@ -1,58 +1,37 @@ -
-
- Properties - Methods - Events - Config Options - Direct Link -
-
-
ContainerLayout
-  AnchorLayout
-    FormLayout
-

Class Ext.layout.FormLayout

- - - - - -
Package:Ext.layout
Defined In:FormLayout.js
Class:FormLayout
Extends:AnchorLayout
-
- * -

This layout manager is specifically designed for rendering and managing child Components of forms. -It is responsible for rendering the labels of Fields.

-

This layout manager is used when a Container is configured with the layout:'form' layout config, -and should generally not need to be created directly via the new keyword. In an application, -it will usually be preferrable to use a FormPanel (which automatically uses FormLayout as its layout -class) since it also provides built-in functionality for loading, validating and submitting the form.

-

Note that when creating a layout via config, the layout-specific config properties must be passed in via -the layoutConfig object which will then be applied internally to the layout.

-

The Container using the FormLayout can also accept the following layout-specific config -properties: +

Properties Methods Events Config Options Direct Link 
ContainerLayout
  AnchorLayout
    FormLayout

Class Ext.layout.FormLayout

Package:Ext.layout
Defined In:FormLayout.js
Class:FormLayout
Extends:AnchorLayout

This layout manager is specifically designed for rendering and managing child Components of +forms. It is responsible for rendering the labels of +Fields.

+

This layout manager is used when a Container is configured with the layout:'form' +layout config option, and should generally not need to be created directly +via the new keyword. See Ext.Container.layout for additional details.

+

In an application, it will usually be preferrable to use a FormPanel +(which is configured with FormLayout as its layout class by default) since it also provides built-in +functionality for loading, validating and submitting the form.

+

A Container using the FormLayout layout manager (e.g. +Ext.form.FormPanel or specifying layout:'form') can also accept the following +layout-specific config properties:

+

Any Component (including Fields) managed by FormLayout accepts the following as a config option:

    -
  • hideLabels: (Boolean)
    True to hide field labels by default (defaults to false)
    • -
  • labelAlign: (String)
    The default label alignment. The default value is empty string '' -for left alignment, but specifying 'top' will align the labels above the fields.
    • -
  • labelPad: (Number)
    The default padding in pixels for field labels (defaults to 5). labelPad only -applies if labelWidth is also specified, otherwise it will be ignored.
    • -
  • labelWidth: (Number)
    The default width in pixels of field labels (defaults to 100)
    • +
  • anchor

-

Any type of components can be added to a FormLayout, but items that inherit from Ext.form.Field -can also supply the following field-specific config properties: +

Any Component managed by FormLayout may be rendered as a form field (with an associated label) by +configuring it with a non-null fieldLabel. Components configured +in this way may be configured with the following options which affect the way the FormLayout renders them:

    -
  • clearCls: (String)
    The CSS class to apply to the special clearing div rendered directly after each -form field wrapper (defaults to 'x-form-clear-left')
    • -
  • fieldLabel: (String)
    The text to display as the label for this field (defaults to '')
    • -
  • hideLabel: (Boolean)
    True to hide the label and separator for this field (defaults to false).
    • -
  • itemCls: (String)
    A CSS class to add to the div wrapper that contains this field label -and field element (the default class is 'x-form-item' and itemCls will be added to that). If supplied, -itemCls at the field level will override the default itemCls supplied at the container level.
    • -
  • labelSeparator: (String)
    The separator to display after the text of the label for this field -(defaults to a colon ':' or the layout's value for labelSeparator). To hide the separator use empty string ''.
    • -
  • labelStyle: (String)
    A CSS style specification string to add to the field label for this field -(defaults to '' or the layout's value for labelStyle).
    • +
  • clearCls
    • +
  • fieldLabel
    • +
  • hideLabel
    • +
  • itemCls
    • +
  • labelSeparator
    • +
  • labelStyle

-Example usage:

+

Example usage:

// Required if showing validation messages
 Ext.QuickTips.init();
 
@@ -60,91 +39,156 @@ Ext.QuickTips.init();
 // you should usually use a FormPanel to also get its form functionality
 // since it already creates a FormLayout internally.
 var form = new Ext.form.FormPanel({
-    labelWidth: 75,
     title: 'Form Layout',
-    bodyStyle:'padding:15px',
+    bodyStyle: 'padding:15px',
     width: 350,
-    labelPad: 10,
     defaultType: 'textfield',
     defaults: {
         // applied to each contained item
         width: 230,
         msgTarget: 'side'
     },
-    layoutConfig: {
-        // layout-specific configs go here
-        labelSeparator: ''
-    },
     items: [{
             fieldLabel: 'First Name',
             name: 'first',
-            allowBlank: false
+            allowBlank: false,
+            labelSeparator: ':' // override labelSeparator layout config
         },{
             fieldLabel: 'Last Name',
             name: 'last'
-        },{
-            fieldLabel: 'Company',
-            name: 'company'
         },{
             fieldLabel: 'Email',
             name: 'email',
             vtype:'email'
+        }, {
+            xtype: 'textarea',
+            hideLabel: true,     // override hideLabels layout config
+            name: 'msg',
+            anchor: '100% -53'
         }
     ],
-    buttons: [{
-        text: 'Save'
-    },{
-        text: 'Cancel'
-    }]
-});
- -
- -

Config Options

- - - - - - - - - - - - - - - - - - - - -
Config OptionsDefined By
  - - renderHidden : Boolean
- True to hide each contained item on render (defaults to false).
- 		ContainerLayout
- -

Public Properties

-
This class has no public properties.
-

Public Methods

-
This class has no public methods.
-

Public Events

-
This class has no public events.
-
\ No newline at end of file + buttons: [ + {text: 'Save'}, + {text: 'Cancel'} + ], + layoutConfig: { + labelSeparator: '~' // superseded by assignment below + }, + // config options applicable to container when layout='form': + hideLabels: false, + labelAlign: 'left', // or 'right' or 'top' + labelSeparator: '>>', // takes precedence over layoutConfig value + labelWidth: 65, // defaults to 100 + labelPad: 8 // defaults to 5, must specify labelWidth to be honored +});

Config Options

Config OptionsDefined By
 labelSeparator : String
See Ext.form.FormPanel.labelSeparator. Configuration +of this property at the container level takes precedence.
FormLayout
 renderHidden : Boolean
True to hide each contained item on render (defaults to false).
ContainerLayout
 trackLabels : Boolean
True to show/hide the field label when the field is hidden. Defaults to false.
FormLayout

Public Properties

PropertyDefined By

Public Methods

MethodDefined By

Public Events

This class has no public events.
\ No newline at end of file