extjs 动态树实现的demo

<div class="body-wrap"> <div class="top-tools"> <a class="inner-link" href="#Ext.Window-props"><img src="../resources/images/default/s.gif" class="item-icon icon-prop">Properties</a> <a class="inner-link" href="#Ext.Window-methods"><img src="../resources/images/default/s.gif" class="item-icon icon-method">Methods</a> <a class="inner-link" href="#Ext.Window-events"><img src="../resources/images/default/s.gif" class="item-icon icon-event">Events</a> <a class="inner-link" href="#Ext.Window-configs"><img src="../resources/images/default/s.gif" class="item-icon icon-config">Config Options</a> <a class="bookmark" href="../docs/?class=Ext.Window"><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"/>Window</pre></div> <h1>Class Ext.Window</h1> <table cellspacing="0"> <tr><td class="label">Package:</td><td class="hd-info">Ext</td></tr> <tr><td class="label">Defined In:</td><td class="hd-info"><a href="../source/widgets/Window.js" target="_blank">Window.js</a></td></tr> <tr><td class="label">Class:</td><td class="hd-info">Window</td></tr> <tr><td class="label">Extends:</td><td class="hd-info"><a ext:cls="Ext.Panel" ext:member="" href="output/Ext.Panel.html">Panel</a></td></tr> </table> <div class="description"> A specialized panel intended for use as an application window. Windows are floated and draggable by default, and also provide specific behavior like the ability to maximize and restore (with an event for minimizing, since the minimize behavior is application-specific). Windows can also be linked to a <a ext:cls="Ext.WindowGroup" href="output/Ext.WindowGroup.html">Ext.WindowGroup</a> or managed by the <a ext:cls="Ext.WindowManager" href="output/Ext.WindowManager.html">Ext.WindowManager</a> to provide grouping, activation, to front/back and other application-specific behavior. </div> <div class="hr"></div> <a id="Ext.Window-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.Window-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.Window-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.Window-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 alt"> <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td> <td class="sig"> <a id="Ext.Window-animateTarget"></a> <b>animateTarget</b> : String/Element <div class="mdesc"> Id or element from which the window should animate while opening (defaults to null with no animation). </div> </td> <td class="msource">Window</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.Window-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 automatically be used as the component's container. </div> </div> </td> <td class="msource