ext.layout.formlayout.html

Ext中文API,学习ext的同志只要你学会ext里的一种控件后其实其他的就大同小异了

<!--
Mock
<link rel="stylesheet" type="text/css" href="http://localhost/ext/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="http://localhost/ext/doc/resources/docs.css"/>
<link rel="stylesheet" type="text/css" href="http://localhost/ext/doc/resources/style.css"/>
-->
<style type="text/css">
    body {
        overflow: scroll;
    }
    /**
	 .mdesc .long {
        display: block;
    }
     */
</style>
<!-- End Mock-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<div class="body-wrap">
    <div class="top-tools">
        <a class="inner-link" href="#Ext.layout.FormLayout-props"><img src="/images/s.gif" class="item-icon icon-prop">Properties</a><a class="inner-link" href="#Ext.layout.FormLayout-methods"><img src="/images/s.gif" class="item-icon icon-method">Methods</a><a class="inner-link" href="#Ext.layout.FormLayout-events"><img src="/images/s.gif" class="item-icon icon-event">Events</a><a class="inner-link" href="#Ext.layout.FormLayout-configs"><img src="/images/s.gif" class="item-icon icon-config">Config Options</a><a class="bookmark" href="../docs/?class=Ext.layout.FormLayout"><img src="/images/s.gif" class="item-icon icon-fav">Direct Link</a>
    </div><h1>Class Ext.layout.FormLayout</h1>
    <table cellspacing="0">
        <!--
        <tr>
        <td class="label">
        Package:
        </td>
        <td class="hd-info">
        </td>
        </tr>
        -->
        <tr>
            <td class="label">
                Defined In:
            </td>
            <td class="hd-info">
                FormLayout.js
            </td>
        </tr>
        <tr>
            <td class="label">
                Class:
            </td>
            <td class="hd-info">
                Ext.layout.FormLayout
            </td>
        </tr>
        <tr>
            <td class="label">
                Extends:
            </td>
            <td class="hd-info">
                Ext.layout.AnchorLayout
            </td>
        </tr>
    </table>
    <div class="description">
        <p>这是用来创建一个表单的布局。
  该类可以被继承或通过配置项 layout:'form' <a href="###" onClick="alert('Ext.Container#layout');">Ext.Container#layout</a> 来创建，
  而不像通常情况下使用关键字 new 来创建。可是，在应用中，一般我们会选择使用 <a href="###" onClick="alert('Ext.form.FormPanel');">Ext.form.FormPanel</a> （自动使用 FormLayout 作为布局类），而且它还提供了内建的读取、效验和提交表单的函数。</p>
  <p>需要注意的是，当通过配置项来创建布局的时候，布局的属性必须通过 <a href="###" onClick="alert('Ext.Container#layoutConfig');">Ext.Container#layoutConfig</a> 对象来指定。使用 FormLayout 布局的容器，也支持以下配置属性：
  <ul>
  <li><b>hideLabels</b>: (Boolean) 值为 true 则隐藏字段的标签（默认为 false）</li>
  <li><b>itemCls</b>: (String) 添加到每个字段标签和字段元素之外的封装 DIV 之上的 CSS 类（默认类为 'x-form-item' 并且 itemCls 会附加在其后）</li>
  <li><b>labelAlign</b>: (String) 默认的标签对齐方式。默认的值为空字串 ''，表示左对齐。指定 'top' 将会使标签顶端对齐。</li>
  <li><b>labelPad</b>: (Number) 默认的以像素表示的字段标签的 padding 值（默认为 5）。只有在指定了 labelWidth 的时候 labelPad 有效，否则被忽略。</li>
  <li><b>labelWidth</b>: (Number) 默认的以像素表示的字段标签的宽度（默认为 100）</li>
  </ul></p>
  <p>任意类型的组件都能被添加到 FormLayout 中，但是继承自 <a href="###" onClick="alert('Ext.form.Field');">Ext.form.Field</a> 的项还支持下列配置项属性：
  <ul>
  <li><b>clearCls</b>: (String) 添加到每个表单字段封装 DIV 的上用于实现 clear 效果的 CSS 类（默认为 'x-form-clear-left'）</li>
  <li><b>fieldLabel</b>: (String) 显示的字段标签文本（默认为 ''）</li>
  <li><b>hideLabel</b>: (Boolean) 值为 true 则隐藏字段的标签和分隔符（默认为 false）。</li>
  <li><b>itemCls</b>: (String) 添加到每个字段标签和字段元素之外的封装 DIV 之上的 CSS 类（默认类为 'x-form-item' 并且 itemCls 会附加在其后）。如果提供了，则字段级的 itemCls 将会覆盖容器级的。</li>
  <li><b>labelSeparator</b>: (String) 每个表格标签之后显示的文本分隔符（默认为 ':' 或者 <a href="###" onClick="alert('#labelSeparator');">#labelSeparator</a> 指定的值）。要隐藏分隔符则设置为 ''。</li>
  <li><b>labelStyle</b>: (String) 一个 CSS 样式字串用于此布局中的所有字段的标签上（默认为 '' 或者 <a href="###" onClick="alert('#labelStyle');">#labelStyle</a> 指定的值）。</li>
  </ul>
  使用示例：</p>
  <pre><code>
// 如果要显示效验信息则必需
Ext.QuickTips.init();

// 虽然你也可以创建一个包含 layout:'form' 的 Panel，但是我们建议使用 FormPanel 来代替，因为它自带 FormLayout 布局。
var form = new Ext.form.FormPanel({
    labelWidth: 75,
    title: 'Form Layout',
    bodyStyle:'padding:15px',
    width: 350,
    labelPad: 10,
    defaultType: 'textfield',
    defaults: {
        // 应用于每个被包含的项
        width: 230,
        msgTarget: 'side'
    },
    layoutConfig: {
        // 这里是布局配置项
        labelSeparator: ''
    },
    items: [{
            fieldLabel: 'First Name',
            name: 'first',
            allowBlank: false
        },{
            fieldLabel: 'Last Name',
            name: 'last'
        },{
            fieldLabel: 'Company',
            name: 'company'
        },{
            fieldLabel: 'Email',
            name: 'email',
            vtype:'email'
        }
    ],
    buttons: [{
        text: 'Save'
    },{
        text: 'Cancel'
    }]
});
</code></pre>
 
    </div>
    <div class="hr">
    </div>
    <a id="Ext.layout.FormLayout-configs"></a>
    <h2>配置项</h2>
    
        <table cellspacing="0" class="member-table">
            <tr>
                <th class="sig-header" colspan="2">
                    配置项
                </th>
                <th class="msource-header">
                    定义者
                </th>
            </tr>
            
                <tr class="config-row expandable">
                    <td class="micon">
                        <a class="exi" href="#expand">&nbsp;</a>
                    </td>
                    <td class="sig">
                        <a id="labelStyle-header"></a>
                        <b>labelStyle</b>
                        : String
                        <div class="mdesc">
                            <div class="short">
                                一个 CSS 样式字串用于此布局中的所有字段的标签上（默认为 ''）。 
                            </div>
                            <div class="long">
                                一个 CSS 样式字串用于此布局中的所有字段的标签上（默认为 ''）。 
                            </div>
                        </div>
                    </td>
                    <td class="msource">
                        
                        
                            FormLayout
                        
                    </td>
                </tr>
            
                <tr class="config-row expandable">
                    <td class="micon">
                        <a class="exi" href="#expand">&nbsp;</a>
                    </td>
                    <td class="sig">
                        <a id="elementStyle-header"></a>
                        <b>elementStyle</b>
                        : String
                        <div class="mdesc">
                            <div class="short">
                                一个 CSS 样式字串用于此布局中的所有字段元素上（默认为 ''）。 
                            </div>
                            <div class="long">
                                一个 CSS 样式字串用于此布局中的所有字段元素上（默认为 ''）。 
                            </div>
                        </div>
                    </td>
                    <td class="msource">
                        
                        
                            FormLayout
                        
                    </td>
                </tr>
            
                <tr class="config-row expandable">
                    <td class="micon">
                        <a class="exi" href="#expand">&nbsp;</a>
                    </td>
                    <td class="sig">
                        <a id="labelSeparator-header"></a>
                        <b>labelSeparator</b>
                        : String
                        <div class="mdesc">
                            <div class="short">
                                每个表格标签之后显示的文本分隔符（默认为 ':'）。要关闭此布局中的所... 
                            </div>
                            <div class="long">
                                每个表格标签之后显示的文本分隔符（默认为 ':'）。要关闭此布局中的所有字段的分隔符，可以设置该字串为 '' （如果在字段的设置里面指定了分隔符，仍然会被显示）。 
                            </div>
                        </div>
                    </td>
                    <td class="msource">
                        
                        
                            FormLayout
                        
                    </td>
                </tr>
            
                <tr class="config-row expandable">
                    <td class="micon">
                        <a class="exi" href="#expand">&nbsp;</a>
                    </td>
                    <td class="sig">
                        <a id="CSS-header"></a>
                        <b>CSS</b>
                        : String
                        <div class="mdesc">
                            <div class="short">
                                一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。 这为容... 
                            </div>
                            <div class="long">
                                一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。 这为容器或容器的子节点加入标准CSS规则提供了方便。 
                            </div>
                        </div>
                    </td>
                    <td class="msource">
                        
                            <!--如果这不是同个namespace下-->
							<a 	ext:cls="Ext.layout.ContainerLayout" 
								ext:member="#method-CSS" 
								href="output/Ext.layout.ContainerLayout.html#method-CSS">
								ContainerLayout
							</a>
                        
                        
                    </td>
                </tr>
            
                <tr class="config-row expandable">
                    <td class="micon">
                        <a class="exi" href="#expand">&nbsp;</a>
                    </td>
                    <td class="sig">
                        <a id="renderHidden-header"></a>
                        <b>renderHidden</b>
                        : Boolean
                        <div class="mdesc">
                            <div class="short">
                                True表示为在渲染时隐藏包含的每一项（缺省为false）。 
                            </div>
                            <div class="long">
                                True表示为在渲染时隐藏包含的每一项（缺省为false）。 
                            </div>
                        </div>
                    </td>
                    <td class="msource">
                        
                            <!--如果这不是同个namespace下-->
							<a 	ext:cls="Ext.layout.ContainerLayout" 
								ext:member="#method-renderHidden" 
								href="output/Ext.layout.ContainerLayout.html#method-renderHidden">
								ContainerLayout
							</a>
                        
                        
                    </td>
                </tr>
            
        </table>
    
    
	<a id="Ext.layout.FormLayout-props"></a>
    <h2>公告属性</h2>
    
        <table cellspacing="0" class="member-table">
            <tr>
                <th colspan="2">
                    属性
                </th>
                <th>
                    定义者
                </th>
            </tr>
            
                <tr class="property-row inherited expandable">
                    <td class="micon">
                        <a class="exi" href="#expand">&nbsp;</a>
                    </td>
                    <td class="sig">
                        <a id="activeItem-activeItem"></a>
                        <b>
                        activeItem: activeItem</b>
                        <div class="mdesc">
                            <div class="short">
                                 一个已激活Ext.Component的引用 例如，if(myPane... 
                            </div>
                            <div class="long">
                                 一个已激活<a href="###" onClick="alert('Ext.Component');">Ext.Component</a>的引用 例如，if(myPanel.layout.activeItem.id == 'item-1') { ... }。 activeItem只会作用在布局样式上。（像<a href="###" onClick="alert('Ext.layout.Accordion');">Ext.layout.Accordion</a>,  <a href="###" onClick="alert('Ext.layout.CardLayout');">Ext.layout.CardLayout</a>和<a href="###" onClick="alert('Ext.layout.FitLayout');">Ext.layout.FitLayout</a>）。只读的。   Related to <a href="###" onClick="alert('Ext.Container#activeItem');">Ext.Container#activeItem</a>.   
                            </div>
                        </div>
                    </td>
                    <td class="msource">
                    	
						
                        
                            <!--如果这不是同个namespace下--><a ext:cls="Ext.layout.ContainerLayout" ext:member="#method-activeItem" href="output/Ext.layout.ContainerLayout.html#method-activeItem">
                        
                        ContainerLayout
                        
                        </a>
                    
                    </td>
                </tr>
            
        </table>
    
    
    <a id="Ext.layout.FormLayout-methods"></a>
    <h2>公共方法</h2>
    
        <table cellspacing="0" class="member-table">
            <tr>
                <th class="sig-header" colspan="2">
                    方法
                </th>
                <th class="msource-header">
                    定义者
                </th>
            </tr>
            
        </table>
    
    
    <a id="Ext.layout.FormLayout-events"></a>
    <a id="Ext.Ajax-events"></a>
    <h2>公告事件</h2>
    
    
        <div class="no-members">
            这个类没公共的事件。
        </div>
    
</div>