docs/api/Ext.form.FieldAncestor.html

   1 <!DOCTYPE html><html><head><title>Ext.form.FieldAncestor | Ext JS 4.0 Documentation</title><script type="text/javascript" src="../ext-all.js"></script><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../scrollbars.css" type="text/css"><link rel="stylesheet" href="../docs.css" type="text/css"><link id="styleCss" rel="stylesheet" href="../style.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script><link rel="stylesheet" href="../prettify.css" type="text/css"><!-- link(rel: 'stylesheet', href: req.baseURL + '/css/ext4.css', type: 'text/css')--><link rel="shortcut icon" type="image/ico" href="../favicon.ico"><!--[if IE]>
   2 <style type="text/css">.head-band { display: none; }
   3 .header { border: 0; top: 0; left: 0px; background: url(../header.gif) repeat-x; }
   4 .doc-tab .members .member a.more { background-color: #efefef; }
   5 </style><link rel="stylesheet" href="/new/css/ie.css" type="text/css"><![endif]-->
   6 </head><body id="ext-body" class="iScroll"><div id="notice" class="notice">For up to date documentation and features, visit
   7 <a href="http://docs.sencha.com/ext-js/4-0">http://docs.sencha.com/ext-js/4-0</a></div><div class="wrapper"><div class="head-band"></div><div class="header"><h2><a href="../index.html">Sencha Documentation</a></h2></div><div id="search"><form><input type="text" placeholder="Search" id="search-field" autocomplete="off" name="q"></form><div id="search-box"></div></div><div id="treePanel"></div><div id="container"><script type="text/javascript">
   8
   9     req = {
  10         liveURL: '.',
  11         standAloneMode: true,
  12         origDocClass: 'Ext.form.FieldAncestor',
  13         docClass: 'Ext.form.FieldAncestor',
  14         docReq: 'Ext.form.FieldAncestor',
  15         version: '4.0',
  16         baseURL: '.',
  17         baseDocURL: '.',
  18         baseProdURL: '.'
  19     };
  20
  21     clsInfo = {};
  22
  23
  24
  25 </script>
  26
  27 <script type="text/javascript" src="../search.js"></script>
  28 <!--script type="text/javascript" src="/new/javascripts/app/examples.js"></script-->
  29 <script type="text/javascript" src="../class_tree.js"></script>
  30 <script type="text/javascript" src="../class_doc.js"></script>
  31 <script type="text/javascript">
  32     req.source = 'FieldAncestor.html#Ext-form.FieldAncestor';
  33     clsInfo = {"methods":[],"cfgs":["fieldDefaults"],"properties":[],"events":["fielderrorchange"],"subclasses":[]};
  34     Ext.onReady(function() {
  35         Ext.create('Docs.classPanel');
  36     });
  37 </script><div id="top-block" class="top-block"><h1 id="clsTitle" class="cls"><a href="../source/FieldAncestor.html#Ext-form.FieldAncestor" target="_blank">Ext.form.FieldAncestor</a></h1></div><div id="docContent"><div id="doc-overview-content"><div class="lft"><p>A mixin for <a href="Ext.container.Container.html" rel="Ext.container.Container" class="docClass">Ext.container.Container</a> components that are likely to have form fields in their
  38 items subtree. Adds the following capabilities:</p>
  39
  40 <ul>
  41 <li>Methods for handling the addition and removal of <a href="Ext.form.Labelable.html" rel="Ext.form.Labelable" class="docClass">Ext.form.Labelable</a> and <a href="Ext.form.field.Field.html" rel="Ext.form.field.Field" class="docClass">Ext.form.field.Field</a>
  42 instances at any depth within the container.</li>
  43 <li>Events (<a href="Ext.form.FieldAncestor.html#fieldvaliditychange" rel="Ext.form.FieldAncestor#fieldvaliditychange" class="docClass">fieldvaliditychange</a> and <a href="Ext.form.FieldAncestor.html#fielderrorchange" rel="Ext.form.FieldAncestor#fielderrorchange" class="docClass">fielderrorchange</a>) for handling changes to the state
  44 of individual fields at the container level.</li>
  45 <li>Automatic application of <a href="Ext.form.FieldAncestor.html#fieldDefaults" rel="Ext.form.FieldAncestor#fieldDefaults" class="docClass">fieldDefaults</a> config properties to each field added within the
  46 container, to facilitate uniform configuration of all fields.</li>
  47 </ul>
  48
  49
  50 <p>This mixin is primarily for internal use by <a href="Ext.form.Panel.html" rel="Ext.form.Panel" class="docClass">Ext.form.Panel</a> and <a href="Ext.form.FieldContainer.html" rel="Ext.form.FieldContainer" class="docClass">Ext.form.FieldContainer</a>,
  51 and should not normally need to be used directly.</p>
  52 <div class="members"><div class="m-cfgs"><div class="definedBy">Defined By</div><a name="configs"></a><h3 class="cfg p">Config Options</h3><h4 class="cfgGroup">Other Configs</h4><div id="config-fieldDefaults" class="member f ni"><a href="Ext.form.FieldAncestor.html#config-fieldDefaults" rel="config-fieldDefaults" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.form.FieldAncestor.html" class="definedIn docClass">Ext.form.FieldAncestor</a><br/><a href="../source/FieldAncestor.html#Ext-form.FieldAncestor-cfg-fieldDefaults" class="viewSource">view source</a></div><a name="fieldDefaults"></a><a name="config-fieldDefaults"></a><a href="Ext.form.FieldAncestor.html#" rel="config-fieldDefaults" class="cls expand">fieldDefaults</a><span> : Object</span></div><div class="description"><div class="short">If specified, the properties in this object are used as default config values for each
  53 Ext.form.Labelable instance (e...</div><div class="long"><p>If specified, the properties in this object are used as default config values for each
  54 <a href="Ext.form.Labelable.html" rel="Ext.form.Labelable" class="docClass">Ext.form.Labelable</a> instance (e.g. <a href="Ext.form.field.Base.html" rel="Ext.form.field.Base" class="docClass">Ext.form.field.Base</a> or <a href="Ext.form.FieldContainer.html" rel="Ext.form.FieldContainer" class="docClass">Ext.form.FieldContainer</a>)
  55 that is added as a descendant of this container. Corresponding values specified in an individual field's
  56 own configuration, or from the <a href="Ext.container.Container.html#defaults" rel="Ext.container.Container#defaults" class="docClass">defaults config</a> of its parent container,
  57 will take precedence. See the documentation for <a href="Ext.form.Labelable.html" rel="Ext.form.Labelable" class="docClass">Ext.form.Labelable</a> to see what config
  58 options may be specified in the <tt>fieldDefaults</tt>.</p>
  59
  60
  61 <p>Example:</p>
  62
  63
  64 <pre><code>new Ext.form.Panel({
  65     fieldDefaults: {
  66         labelAlign: 'left',
  67         labelWidth: 100
  68     },
  69     items: [{
  70         xtype: 'fieldset',
  71         defaults: {
  72             labelAlign: 'top'
  73         },
  74         items: [{
  75             name: 'field1'
  76         }, {
  77             name: 'field2'
  78         }]
  79     }, {
  80         xtype: 'fieldset',
  81         items: [{
  82             name: 'field3',
  83             labelWidth: 150
  84         }, {
  85             name: 'field4'
  86         }]
  87     }]
  88 });</code></pre>
  89
  90
  91 <p>In this example, field1 and field2 will get labelAlign:'top' (from the fieldset's <tt>defaults</tt>)
  92 and labelWidth:100 (from <tt>fieldDefaults</tt>), field3 and field4 will both get labelAlign:'left' (from
  93 <tt>fieldDefaults</tt> and field3 will use the labelWidth:150 from its own config.</p>
  94
  95 </div></div></div></div><div class="m-events"><a name="events"></a><div class="definedBy">Defined By</div><h3 class="evt p">Events</h3><div id="event-fielderrorchange" class="member f ni"><a href="Ext.form.FieldAncestor.html#event-fielderrorchange" rel="event-fielderrorchange" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.form.FieldAncestor.html" class="definedIn docClass">Ext.form.FieldAncestor</a><br/><a href="../source/FieldAncestor.html#Ext-form.FieldAncestor-event-fielderrorchange" class="viewSource">view source</a></div><a name="fielderrorchange"></a><a name="event-fielderrorchange"></a><a href="Ext.form.FieldAncestor.html#" rel="event-fielderrorchange" class="cls expand">fielderrorchange</a>(
  96 <span class="pre">Ext.form.FieldAncestor this, Ext.form.Labelable The, String error</span>)
  97 </div><div class="description"><div class="short"><p>Fires when the active error message is changed for any one of the <a href="Ext.form.Labelable.html" rel="Ext.form.Labelable" class="docClass">Ext.form.Labelable</a>
  98 instances within this container.</p>
  99 </div><div class="long"><p>Fires when the active error message is changed for any one of the <a href="Ext.form.Labelable.html" rel="Ext.form.Labelable" class="docClass">Ext.form.Labelable</a>
 100 instances within this container.</p>
 101 <h3 class="pa">Parameters</h3><ul><li><span class="pre">this</span> : Ext.form.FieldAncestor<div class="sub-desc">
 102 </div></li><li><span class="pre">The</span> : Ext.form.Labelable<div class="sub-desc"><p>Labelable instance whose active error was changed</p>
 103 </div></li><li><span class="pre">error</span> : String<div class="sub-desc"><p>The active error message</p>
 104 </div></li></ul></div></div></div></div></div></div></div><div id="pageContent"></div></div></div></div></body></html>