js+css+html经典设计

<div class="body-wrap"> <div class="top-tools"> <a class="inner-link" href="#Ext.grid.PropertyGrid-props"><img src="../resources/images/default/s.gif" class="item-icon icon-prop">Properties</a> <a class="inner-link" href="#Ext.grid.PropertyGrid-methods"><img src="../resources/images/default/s.gif" class="item-icon icon-method">Methods</a> <a class="inner-link" href="#Ext.grid.PropertyGrid-events"><img src="../resources/images/default/s.gif" class="item-icon icon-event">Events</a> <a class="inner-link" href="#Ext.grid.PropertyGrid-configs"><img src="../resources/images/default/s.gif" class="item-icon icon-config">Config Options</a> <a class="bookmark" href="../docs/?class=Ext.grid.PropertyGrid"><img src="../resources/images/default/s.gif" class="item-icon icon-fav">Direct Link</a> </div> <div class="inheritance res-block"> <pre class="res-block-inner"><a ext:cls="Ext.util.Observable" ext:member="" href="output/Ext.util.Observable.html">Observable</a> <img src="resources/elbow-end.gif"/><a ext:cls="Ext.Component" ext:member="" href="output/Ext.Component.html">Component</a> <img src="resources/elbow-end.gif"/><a ext:cls="Ext.BoxComponent" ext:member="" href="output/Ext.BoxComponent.html">BoxComponent</a> <img src="resources/elbow-end.gif"/><a ext:cls="Ext.Container" ext:member="" href="output/Ext.Container.html">Container</a> <img src="resources/elbow-end.gif"/><a ext:cls="Ext.Panel" ext:member="" href="output/Ext.Panel.html">Panel</a> <img src="resources/elbow-end.gif"/><a ext:cls="Ext.grid.GridPanel" ext:member="" href="output/Ext.grid.GridPanel.html">GridPanel</a> <img src="resources/elbow-end.gif"/><a ext:cls="Ext.grid.EditorGridPanel" ext:member="" href="output/Ext.grid.EditorGridPanel.html">EditorGridPanel</a> <img src="resources/elbow-end.gif"/>PropertyGrid</pre></div> <h1>Class Ext.grid.PropertyGrid</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="../src/PropertyGrid.js" target="_blank">PropertyGrid.js</a></td></tr> <tr><td class="label">Class:</td><td class="hd-info">PropertyGrid</td></tr> <tr><td class="label">Extends:</td><td class="hd-info"><a ext:cls="Ext.grid.EditorGridPanel" ext:member="" href="output/Ext.grid.EditorGridPanel.html">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 ext:cls="Ext.grid.PropertyRecord" href="output/Ext.grid.PropertyRecord.html">Ext.grid.PropertyRecord</a>s. Example usage: <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>Config Options</h2> <table cellspacing="0" class="member-table"> <tr> <th class="sig-header" colspan="2">Config Options</th> <th class="msource-header">Defined By</th> </tr> <tr class="config-row inherited expandable"> <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td> <td class="sig"> <a id="Ext.grid.PropertyGrid-activeItem"></a> <b>activeItem</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 ext:cls="Ext.layout.Accordion" href="output/Ext.layout.Accordion.html">Ext.layout.Accordion</a>, <a ext:cls="Ext.layout.CardLayout" href="output/Ext.layout.CardLayout.html">Ext.layout.CardLayout</a> and <a ext:cls="Ext.layout.FitLayout" href="output/Ext.layout.FitLayout.html">Ext.layout.FitLayout</a>). Related to <a ext:cls="Ext.layout.ContainerLayout" ext:member="activeItem" href="output/Ext.layout.ContainerLayout.html#activeItem">Ext.layout.ContainerLayout.activeItem</a>. </div> </div> </td> <td class="msource"><a ext:cls="Ext.Container" ext:member="#activeItem" href="output/Ext.Container.html#activeItem">Container</a></td> </tr> <tr class="config-row inherited alt"> <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td> <td class="sig"> <a id="Ext.grid.PropertyGrid-allowDomMove"></a> <b>allowDomMove</b> : Boolean <div class="mdesc"> Whether the component can move the Dom node when rendering (defaults to true). </div> </td> <td class="msource"><a ext:cls="Ext.Component" ext:member="#allowDomMove" href="output/Ext.Component.html#allowDomMove">Component</a></td> </tr> <tr class="config-row inherited expandable"> <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td> <td class="sig"> <a id="Ext.grid.PropertyGrid-animCollapse"></a> <b>animCollapse</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"> True to animate the transition when the panel is collapsed, false to skip the animation (defaults to true if the <a ext:cls="Ext.Fx" href="output/Ext.Fx.html">Ext.Fx</a> class is available, otherwise false). </div> </div> </td> <td class="msource"><a ext:cls="Ext.Panel" ext:member="#animCollapse" href="output/Ext.Panel.html#animCollapse">Panel</a></td> </tr> <tr class="config-row inherited alt expandable"> <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td> <td class="sig"> <a id="Ext.grid.PropertyGrid-applyTo"></a> <b>applyTo</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"> 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 structural markup for this component. When applyTo is used, constituent parts of the component can also be specified by id or CSS class name within the main element, and the component being created may attempt to create its subcomponents from that markup if applicable. Using this config, a call to render() is not required. If applyTo is specified, any value passed for <a ext:cls="Ext.Component" ext:member="renderTo" href="output/Ext.Component.html#renderTo">renderTo</a> will be ignored and the target element's parent node will automat