ext.grid.propertygrid.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.grid.PropertyGrid-props"><img src="/images/s.gif" class="item-icon icon-prop">Properties</a><a class="inner-link" href="#Ext.grid.PropertyGrid-methods"><img src="/images/s.gif" class="item-icon icon-method">Methods</a><a class="inner-link" href="#Ext.grid.PropertyGrid-events"><img src="/images/s.gif" class="item-icon icon-event">Events</a><a class="inner-link" href="#Ext.grid.PropertyGrid-configs"><img src="/images/s.gif" class="item-icon icon-config">Config Options</a><a class="bookmark" href="../docs/?class=Ext.grid.PropertyGrid"><img src="/images/s.gif" class="item-icon icon-fav">Direct Link</a>
    </div><h1>Class Ext.grid.PropertyGrid</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">
                PropertyGrid.js
            </td>
        </tr>
        <tr>
            <td class="label">
                Class:
            </td>
            <td class="hd-info">
                Ext.grid.PropertyGrid
            </td>
        </tr>
        <tr>
            <td class="label">
                Extends:
            </td>
            <td class="hd-info">
                Ext.grid.EditorGridPanel
            </td>
        </tr>
    </table>
    <div class="description">
        Grid的一种特殊实现，其意义为效仿IDE开发环境中的属性grid。
  Grid中的每一行表示一些对象当中的属性、数据，以“名称/值”的形式保存在<a href="###" onClick="alert('Ext.grid.PropertyRecord');">Ext.grid.PropertyRecord</a>中。举例如下：
  <pre><code>
var grid = new Ext.grid.PropertyGrid({
    title: 'Properties Grid',
    autoHeight: true,
    width: 300,
    renderTo: 'grid-ct',
    source: {
        "(name)": "My Object",
        "Created": new Date(Date.parse('10/15/2006')),
        "Available": false,
        "Version": .01,
        "Description": "A test object"
    }
});
</pre></code
    </div>
    <div class="hr">
    </div>
    <a id="Ext.grid.PropertyGrid-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="source-header"></a>
                        <b>source</b>
                        : Object
                        <div class="mdesc">
                            <div class="short">
                                数据对象，作为grid的数据源（参阅 #setSource ）。 
                            </div>
                            <div class="long">
                                数据对象，作为grid的数据源（参阅 <a href="###" onClick="alert('#setSource');">#setSource</a> ）。 
                            </div>
                        </div>
                    </td>
                    <td class="msource">
                        
                        
                            PropertyGrid
                        
                    </td>
                </tr>
            
                <tr class="config-row expandable">
                    <td class="micon">
                        <a class="exi" href="#expand">&nbsp;</a>
                    </td>
                    <td class="sig">
                        <a id="customEditors-header"></a>
                        <b>customEditors</b>
                        : Object
                        <div class="mdesc">
                            <div class="short">
                                An object containing name/value pai... 
                            </div>
                            <div class="long">
                                An object containing name/value pairs of custom editor type definitions that allow
    the grid to support additional types of editable fields.  为了使grid能够支持一些可编辑字段，把这些编辑字段的类型的定义写在这个对象中， 以“名称/值”的形式出现。 缺省下，Grid内置的表单编辑器支持强类型的编辑，如字符串、日期、数字和布尔型，但亦可以将任意的input控件关联到特定的编辑器。	 编辑器的名字应该与属性的名字相一致，例如： <pre><code>
var grid = new Ext.grid.PropertyGrid({
    ...
    customEditors: {
        'Start Time': new Ext.grid.GridEditor(new Ext.form.TimeField({selectOnFocus:true}))
    },
    source: {
        'Start Time': '10:00 AM'
    }
});
</code></pre> 
                            </div>
                        </div>
                    </td>
                    <td class="msource">
                        
                        
                            PropertyGrid
                        
                    </td>
                </tr>
            
                <tr class="config-row expandable">
                    <td class="micon">
                        <a class="exi" href="#expand">&nbsp;</a>
                    </td>
                    <td class="sig">
                        <a id="clicksToEdit-header"></a>
                        <b>clicksToEdit</b>
                        : Number
                        <div class="mdesc">
                            <div class="short">
                                要转换单元格为编辑状态所需的鼠标点击数（默认为两下，即双击）
 
                            </div>
                            <div class="long">
                                要转换单元格为编辑状态所需的鼠标点击数（默认为两下，即双击）
 
                            </div>
                        </div>
                    </td>
                    <td class="msource">
                        
                            <!--如果这不是同个namespace下-->
							<a 	ext:cls="Ext.grid.EditorGridPanel" 
								ext:member="#method-clicksToEdit" 
								href="output/Ext.grid.EditorGridPanel.html#method-clicksToEdit">
								EditorGridPanel
							</a>
                        
                        
                    </td>
                </tr>
            
                <tr class="config-row expandable">
                    <td class="micon">
                        <a class="exi" href="#expand">&nbsp;</a>
                    </td>
                    <td class="sig">
                        <a id="store-header"></a>
                        <b>store</b>
                        : Ext.data.Store
                        <div class="mdesc">
                            <div class="short">
                                Grid应使用 Ext.data.Store 作为其数据源 (必须的).
 
                            </div>
                            <div class="long">
                                Grid应使用 <a href="###" onClick="alert('Ext.data.Store');">Ext.data.Store</a> 作为其数据源 (必须的).
 
                            </div>
                        </div>
                    </td>
                    <td class="msource">
                        
                            <!--如果这不是同个namespace下-->
							<a 	ext:cls="Ext.grid.GridPanel" 
								ext:member="#method-store" 
								href="output/Ext.grid.GridPanel.html#method-store">
								GridPanel
							</a>
                        
                        
                    </td>
                </tr>
            
                <tr class="config-row expandable">
                    <td class="micon">
                        <a class="exi" href="#expand">&nbsp;</a>
                    </td>
                    <td class="sig">
                        <a id="cm-header"></a>
                        <b>cm</b>
                        : Object
                        <div class="mdesc">
                            <div class="short">
                                {@link #colModel}的简写方式
 
                            </div>
                            <div class="long">
                                {@link #colModel}的简写方式
 
                            </div>
                        </div>
                    </td>
                    <td class="msource">
                        
                            <!--如果这不是同个namespace下-->
							<a 	ext:cls="Ext.grid.GridPanel" 
								ext:member="#method-cm" 
								href="output/Ext.grid.GridPanel.html#method-cm">
								GridPanel
							</a>
                        
                        
                    </td>
                </tr>
            
                <tr class="config-row expandable">
                    <td class="micon">
                        <a class="exi" href="#expand">&nbsp;</a>
                    </td>
                    <td class="sig">
                        <a id="colModel-header"></a>
                        <b>colModel</b>
                        : Object
                        <div class="mdesc">
                            <div class="short">
                                渲染Grid所使用的 Ext.grid.ColumnModel (必须... 
                            </div>
                            <div class="long">
                                渲染Grid所使用的 <a href="###" onClick="alert('Ext.grid.ColumnModel');">Ext.grid.ColumnModel</a> (必须的).
 
                            </div>
                        </div>
                    </td>
                    <td class="msource">
                        
                            <!--如果这不是同个namespace下-->
							<a 	ext:cls="Ext.grid.GridPanel" 
								ext:member="#method-colModel" 
								href="output/Ext.grid.GridPanel.html#method-colModel">
								GridPanel
							</a>
                        
                        
                    </td>
                </tr>
            
                <tr class="config-row expandable">
                    <td class="micon">
                        <a class="exi" href="#expand">&nbsp;</a>
                    </td>
                    <td class="sig">
                        <a id="sm-header"></a>
                        <b>sm</b>
                        : Object
                        <div class="mdesc">
                            <div class="short">
                                {@link #selModel}的简写方式
 
                            </div>
                            <div class="long">
                                {@link #selModel}的简写方式
 
                            </div>
                        </div>
                    </td>
                    <td class="msource">
                        
                            <!--如果这不是同个namespace下-->
							<a 	ext:cls="Ext.grid.GridPanel" 
								ext:member="#method-sm" 
								href="output/Ext.grid.GridPanel.html#method-sm">
								GridPanel