ext.component.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.Component-props"><img src="/images/s.gif" class="item-icon icon-prop">Properties</a><a class="inner-link" href="#Ext.Component-methods"><img src="/images/s.gif" class="item-icon icon-method">Methods</a><a class="inner-link" href="#Ext.Component-events"><img src="/images/s.gif" class="item-icon icon-event">Events</a><a class="inner-link" href="#Ext.Component-configs"><img src="/images/s.gif" class="item-icon icon-config">Config Options</a><a class="bookmark" href="../docs/?class=Ext.Component"><img src="/images/s.gif" class="item-icon icon-fav">Direct Link</a>
    </div><h1>Class Ext.Component</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">
                Component.js
            </td>
        </tr>
        <tr>
            <td class="label">
                Class:
            </td>
            <td class="hd-info">
                Ext.Component
            </td>
        </tr>
        <tr>
            <td class="label">
                Extends:
            </td>
            <td class="hd-info">
                Ext.util.Observable
            </td>
        </tr>
    </table>
    <div class="description">
        <p>Base class for all Ext components. 
  全体Ext组件的基类。
  Component下所有的子类均按照统一的Ext组件生命周期（lifeycle）执行运作,即创建、渲染和销毁（creation,rendering和destruction）。
  并具有隐藏/显示和启用/禁用的基本行为特性。</p> 
  Component下的子类可被延时渲染（lazy-rendered）成为<a href="###" onClick="alert('Ext.Container');">Ext.Container</a>的一种，同时自动登记到<a href="###" onClick="alert('Ext.ComponentMgr');">Ext.ComponentMgr</a>，
  这样便可在后面的代码使用<a href="###" onClick="alert('Ext#getCmp');">Ext#getCmp</a>获取组件的引用。
  当需要以盒子模型（box model）的方式管理这些可视的器件（widgets），
  器件就必须从Component（或<a href="###" onClick="alert('Ext.BoxComponent');">Ext.BoxComponent</a>）继承，渲染为一种布局。 
  </p>
  <p>
  每种component都有特定的类型，是Ext自身设置的类型。对xtype检查的相关方法如<a href="###" onClick="alert('#getXType');">#getXType</a>和<a href="###" onClick="alert('#isXType');">#isXType</a>。
  这里是所有有效的xtypes列表：</p>
  <pre>
xtype            类Class
-------------    ------------------
box              Ext.BoxComponent
button           Ext.Button
colorpalette     Ext.ColorPalette
component        Ext.Component
container        Ext.Container
cycle            Ext.CycleButton
dataview         Ext.DataView
datepicker       Ext.DatePicker
editor           Ext.Editor
editorgrid       Ext.grid.EditorGridPanel
grid             Ext.grid.GridPanel
paging           Ext.PagingToolbar
panel            Ext.Panel
progress         Ext.ProgressBar
splitbutton      Ext.SplitButton
tabpanel         Ext.TabPanel
treepanel        Ext.tree.TreePanel
viewport         Ext.ViewPort
window           Ext.Window

Toolbar components 工具条组件
---------------------------------------
toolbar          Ext.Toolbar
tbbutton         Ext.Toolbar.Button
tbfill           Ext.Toolbar.Fill
tbitem           Ext.Toolbar.Item
tbseparator      Ext.Toolbar.Separator
tbspacer         Ext.Toolbar.Spacer
tbsplit          Ext.Toolbar.SplitButton
tbtext           Ext.Toolbar.TextItem

Form components 表单组件
---------------------------------------
form             Ext.FormPanel
checkbox         Ext.form.Checkbox
combo            Ext.form.ComboBox
datefield        Ext.form.DateField
field            Ext.form.Field
fieldset         Ext.form.FieldSet
hidden           Ext.form.Hidden
htmleditor       Ext.form.HtmlEditor
numberfield      Ext.form.NumberField
radio            Ext.form.Radio
textarea         Ext.form.TextArea
textfield        Ext.form.TextField
timefield        Ext.form.TimeField
trigger          Ext.form.TriggerField
</pre
    </div>
    <div class="hr">
    </div>
    <a id="Ext.Component-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="id-header"></a>
                        <b>id</b>
                        : String
                        <div class="mdesc">
                            <div class="short">
                                唯一的组件id（默认为自动分配的id）。 
                            </div>
                            <div class="long">
                                唯一的组件id（默认为自动分配的id）。 
                            </div>
                        </div>
                    </td>
                    <td class="msource">
                        
                        
                            Component
                        
                    </td>
                </tr>
            
                <tr class="config-row expandable">
                    <td class="micon">
                        <a class="exi" href="#expand">&nbsp;</a>
                    </td>
                    <td class="sig">
                        <a id="xtype-header"></a>
                        <b>xtype</b>
                        : String
                        <div class="mdesc">
                            <div class="short">
                                The registered xtype to create.  用于... 
                            </div>
                            <div class="long">
                                The registered xtype to create.  用于登记一个xtype。 This config option is not used when passing a config object into a constructor.  This config option is used only when lazy instantiation is being used, and a child item of a Container is being specified not as a fully instantiated Component, but as a <i>Component config object</i>.  The xtype will be looked up at render time up to determine what type of child Component to create.<br><br> The predefined xtypes are listed {@link Ext.Component here}. <br><br> If you subclass Components to create your own Components, you may register them using <a href="###" onClick="alert('Ext.ComponentMgr#registerType');">Ext.ComponentMgr#registerType</a> in order to be able to take advantage of lazy instantiation and rendering. 
                            </div>
                        </div>
                    </td>
                    <td class="msource">
                        
                        
                            Component
                        
                    </td>
                </tr>
            
                <tr class="config-row expandable">
                    <td class="micon">
                        <a class="exi" href="#expand">&nbsp;</a>
                    </td>
                    <td class="sig">
                        <a id="cls-header"></a>
                        <b>cls</b>
                        : String
                        <div class="mdesc">
                            <div class="short">
                                一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。 这为容... 
                            </div>
                            <div class="long">
                                一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。 这为容器或容器的子节点加入标准CSS规则提供了方便。 
                            </div>
                        </div>
                    </td>
                    <td class="msource">
                        
                        
                            Component
                        
                    </td>
                </tr>
            
                <tr class="config-row expandable">
                    <td class="micon">
                        <a class="exi" href="#expand">&nbsp;</a>
                    </td>
                    <td class="sig">
                        <a id="style-header"></a>
                        <b>style</b>
                        : String
                        <div class="mdesc">
                            <div class="short">
                                作用在组件元素上特定的样式。该值的有效格式应如Ext.Element#... 
                            </div>
                            <div class="long">
                                作用在组件元素上特定的样式。该值的有效格式应如<a href="###" onClick="alert('Ext.Element#applyStyles');">Ext.Element#applyStyles</a>。 
                            </div>
                        </div>
                    </td>
                    <td class="msource">
                        
                        
                            Component
                        
                    </td>
                </tr>
            
                <tr class="config-row expandable">
                    <td class="micon">
                        <a class="exi" href="#expand">&nbsp;</a>
                    </td>
                    <td class="sig">
                        <a id="plugins-header"></a>
                        <b>plugins</b>
                        : Object/Array
                        <div class="mdesc">
                            <div class="short">
                                针对该组件自定义的功能，是对象或这些对象组成的数组。 一个有效的插件须... 
                            </div>
                            <div class="long">
                                针对该组件自定义的功能，是对象或这些对象组成的数组。 一个有效的插件须保证带有一个init的方法以便接收属于Ext.Component类型的引用。 当一个组件被创建后，若发现由插件可用，组件会调用每个插件上的init方法，传入一个应用到插件本身。   这样，插件便能按照组件所提供的功能，调用到组件的方法或响应事件。 
                            </div>
                        </div>
                    </td>
                    <td class="msource">
                        
                        
                            Component
                        
                    </td>
                </tr>
            
                <tr class="config-row expandable">
                    <td class="micon">
                        <a class="exi" href="#expand">&nbsp;</a>
                    </td>
                    <td class="sig">
                        <a id="applyTo-header"></a>
                        <b>applyTo</b>
                        : Mixed
                        <div class="mdesc">
                            <div class="short">
                                节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文... 
                            </div>
                            <div class="long">
                                节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文档中已经存在的元素 当使用applyTo后，主元素所指定的id或CSS样式类将会作用于组件构成的部分， 而被创建的组件将会尝试着根据这些markup构建它的子组件。 使用了这项配置后，不需要执行render()的方法。 若指定了applyTo，那么任何由<a href="###" onClick="alert('#renderTo');">#renderTo</a>传入的值将会被忽略并使用目标元素的父级元素作为组件的容器。 
                            </div>
                        </div>
                    </td>
                    <td class="msource">
                        
                        
                            Component
                        
                    </td>
                </tr>
            
                <tr class="config-row expandable">
                    <td class="micon">
                        <a class="exi" href="#expand">&nbsp;</a>
                    </td>
                    <td class="sig">
                        <a id="renderTo-header"></a>
                        <b>renderTo</b>
                        : Mixed
                        <div class="mdesc">
                            <div class="short">
                                容器渲染的那个节点的id,或是DOM节点，又或者是与DIV相当的现有元... 
                            </div>
                            <div class="long">
                                容器渲染的那个节点的id,或是DOM节点，又或者是与DIV相当的现有元素。 使用了这项配置后，不需要执行render()的方法。 
                            </div>
                        </div>
                    </td>
                    <td class="msource">