Extjs-3.4例子+源码

<div xmlns:ext="http://www.extjs.com" class="body-wrap"><div class="inheritance res-block"><pre class="res-block-inner"><a href="output/Ext.util.Observable.html" ext:member="" ext:cls="Ext.util.Observable">Observable</a> <img src="resources/elbow-end.gif"><a href="output/Ext.Component.html" ext:member="" ext:cls="Ext.Component">Component</a> <img src="resources/elbow-end.gif"><a href="output/Ext.BoxComponent.html" ext:member="" ext:cls="Ext.BoxComponent">BoxComponent</a> <img src="resources/elbow-end.gif"><a href="output/Ext.Container.html" ext:member="" ext:cls="Ext.Container">Container</a> <img src="resources/elbow-end.gif"><a href="output/Ext.Panel.html" ext:member="" ext:cls="Ext.Panel">Panel</a> <img src="resources/elbow-end.gif"><a href="output/Ext.grid.GridPanel.html" ext:member="" ext:cls="Ext.grid.GridPanel">GridPanel</a> <img src="resources/elbow-end.gif"><a href="output/Ext.grid.EditorGridPanel.html" ext:member="" ext:cls="Ext.grid.EditorGridPanel">EditorGridPanel</a> <img src="resources/elbow-end.gif">PropertyGrid</pre></div><h1>Class <a href="source/PropertyGrid.html#cls-Ext.grid.PropertyGrid">Ext.grid.PropertyGrid</a></h1><table cellspacing="0"><tr><td class="label">Package:</td><td class="hd-info">Ext.grid</td></tr><tr><td class="label">Defined In:</td><td class="hd-info"><a href="source/PropertyGrid.html#cls-Ext.grid.PropertyGrid">PropertyGrid.js</a></td></tr><tr><td class="label">Class:</td><td class="hd-info"><a href="source/PropertyGrid.html#cls-Ext.grid.PropertyGrid">PropertyGrid</a></td></tr><tr><td class="label">Extends:</td><td class="hd-info"><a href="output/Ext.grid.EditorGridPanel.html" ext:cls="Ext.grid.EditorGridPanel" ext:member="">EditorGridPanel</a></td></tr></table><div class="description">A specialized grid implementation intended to mimic the traditional property grid as typically seen in development IDEs. Each row in the grid represents a property of some object, and the data is stored as a set of name/value pairs in <a href="output/Ext.grid.PropertyRecord.html" ext:cls="Ext.grid.PropertyRecord">Ext.grid.PropertyRecord</a>s. Example usage: <pre><code><b>var</b> grid = <b>new</b> Ext.grid.PropertyGrid({ title: <em>'Properties Grid'</em>, autoHeight: true, width: 300, renderTo: <em>'grid-ct'</em>, source: { <em>"(name)"</em>: <em>"My Object"</em>, <em>"Created"</em>: <b>new</b> Date(Date.parse(<em>'10/15/2006'</em>)), <em>"Available"</em>: false, <em>"Version"</em>: .01, <em>"Description"</em>: <em>"A test object"</em> } });</code></pre></div><div class="hr"></div><a id="Ext.grid.PropertyGrid-configs"></a><h2>Config Options</h2><table cellspacing="0" class="member-table"><tbody><tr><th colspan="2" class="sig-header">Config Options</th><th class="msource-header">Defined By</th></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.Container-activeItem"></a><b><a href="source/Container.html#cfg-Ext.Container-activeItem">activeItem</a></b> : String/Number<div class="mdesc"><div class="short">A string component id or the numeric index of the component that should be initially activated within the container's...</div><div class="long">A string component id or the numeric index of the component that should be initially activated within the container's layout on render. For example, activeItem: 'item-1' or activeItem: 0 (index 0 = the first item in the container's collection). activeItem only applies to layout styles that can display items one at a time (like <a href="output/Ext.layout.AccordionLayout.html" ext:cls="Ext.layout.AccordionLayout">Ext.layout.AccordionLayout</a>, <a href="output/Ext.layout.CardLayout.html" ext:cls="Ext.layout.CardLayout">Ext.layout.CardLayout</a> and <a href="output/Ext.layout.FitLayout.html" ext:cls="Ext.layout.FitLayout">Ext.layout.FitLayout</a>). Related to <a href="output/Ext.layout.ContainerLayout.html#Ext.layout.ContainerLayout-activeItem" ext:member="activeItem" ext:cls="Ext.layout.ContainerLayout">Ext.layout.ContainerLayout.activeItem</a>.</div></div></td><td class="msource"><a href="output/Ext.Container.html#activeItem" ext:member="#activeItem" ext:cls="Ext.Container">Container</a></td></tr><tr class="config-row inherited"><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.Component-allowDomMove"></a><b><a href="source/Component.html#cfg-Ext.Component-allowDomMove">allowDomMove</a></b> : Boolean<div class="mdesc">Whether the component can move the Dom node when rendering (defaults to true).</div></td><td class="msource"><a href="output/Ext.Component.html#allowDomMove" ext:member="#allowDomMove" ext:cls="Ext.Component">Component</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.BoxComponent-anchor"></a><b><a href="source/BoxComponent.html#cfg-Ext.BoxComponent-anchor">anchor</a></b> : String<div class="mdesc"><div class="short">Note: this config is only used when this Component is rendered by a Container which has been configured to use an Anc...</div><div class="long"><p><b>Note</b>: this config is only used when this Component is rendered by a Container which has been configured to use an <b><a href="output/Ext.layout.AnchorLayout.html" ext:cls="Ext.layout.AnchorLayout">AnchorLayout</a> (or subclass thereof).</b> based layout manager, for example:<div class="mdetail-params"><ul> <li><a href="output/Ext.form.FormPanel.html" ext:cls="Ext.form.FormPanel">Ext.form.FormPanel</a></li> <li>specifying <code>layout: <em>'anchor'</em> <i>// or <em>'form'</em>, or <em>'absolute'</em></i></code></li> </ul></div></p> <p>See <a href="output/Ext.layout.AnchorLayout.html" ext:cls="Ext.layout.AnchorLayout">Ext.layout.AnchorLayout</a>.<a href="output/Ext.layout.AnchorLayout.html#Ext.layout.AnchorLayout-anchor" ext:member="anchor" ext:cls="Ext.layout.AnchorLayout">anchor</a> also.</p></div></div></td><td class="msource"><a href="output/Ext.BoxComponent.html#anchor" ext:member="#anchor" ext:cls="Ext.BoxComponent">BoxComponent</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.Panel-animCollapse"></a><b><a href="source/Panel.html#cfg-Ext.Panel-animCollapse">animCollapse</a></b> : Boolean<div class="mdesc"><div class="short">true to animate the transition when the panel is collapsed, false to skip the animation (defaults to true if the Ext....</div><div class="long"><code>true</code> to animate the transition when the panel is collapsed, <code>false</code> to skip the animation (defaults to <code>true</code> if the <a href="output/Ext.Fx.html" ext:cls="Ext.Fx">Ext.Fx</a> class is available, otherwise <code>false</code>).</div></div></td><td class="msource"><a href="output/Ext.Panel.html#animCollapse" ext:member="#animCollapse" ext:cls="Ext.Panel">Panel</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.Panel-applyTo"></a><b><a href="source/Panel.html#cfg-Ext.Panel-applyTo">applyTo</a></b> : Mixed<div class="mdesc"><div class="short">The id of the node, a DOM node or an existing Element corresponding to a DIV that is already present in the document ...</div><div class="long"><p>The id of the node, a DOM node or an existing Element corresponding to a DIV that is already present in the document that specifies some panel-specific structural markup. When <code>applyTo</code> is used, constituent parts of the panel can be specified by CSS class name within the main element, and the panel will automatically create those components from that markup. Any required components not specified in the markup will be autogenerated if necessary.</p> <p>The following class names are supported (base