ExtJS 3.4关于TreePanel的一些实例

【实例简介】
学习TreePanel时根据网上的资料自己实现的实例，结构如下： 1. 创建一棵树 2. 使用TreeLoader加载数据生成树 3. 读取本地Json数据生成树 4. 使用Servlet提供数据 5. 树的事件 6. 右键菜单 7. 修改节点的默认图标 8. 给节点增加提示信息 9. 为节点设置超链接 10. 编辑节点名称 11. 树形的拖放 12. 判断拖放目标 13. 树之间的拖放 14. 过滤器 15. 对树进行排序 16. 对树增加复选框 代码中有详尽的注释。
【实例截图】
【核心代码】
Ext_Tree
└── Ext_Tree
├── build
│   └── classes
│   └── com
│   └── magus
│   └── action
│   ├── CheckedAction.class
│   ├── HrefAction.class
│   ├── NodeDropAction.class
│   ├── TipAction.class
│   ├── TreeAction.class
│   └── TreeSortAction.class
├── src
│   └── com
│   └── magus
│   └── action
│   ├── CheckedAction.java
│   ├── HrefAction.java
│   ├── NodeDropAction.java
│   ├── TipAction.java
│   ├── TreeAction.java
│   └── TreeSortAction.java
└── WebContent
├── data
│   ├── asyncTreeNode.txt
│   ├── drag.txt
│   └── drop.txt
├── ext3
│   ├── ext-all.js
│   ├── ext-base.js
│   ├── ext-jquery-adapter.js
│   ├── ext-lang-zh_CN.js
│   ├── resources
│   │   ├── css
│   │   │   └── ext-all.css
│   │   └── images
│   │   └── default
│   │   ├── box
│   │   │   ├── corners-blue.gif
│   │   │   ├── corners.gif
│   │   │   ├── l-blue.gif
│   │   │   ├── l.gif
│   │   │   ├── r-blue.gif
│   │   │   ├── r.gif
│   │   │   ├── tb-blue.gif
│   │   │   └── tb.gif
│   │   ├── button
│   │   │   ├── arrow.gif
│   │   │   ├── btn.gif
│   │   │   ├── group-cs.gif
│   │   │   ├── group-lr.gif
│   │   │   ├── group-tb.gif
│   │   │   ├── s-arrow-b.gif
│   │   │   ├── s-arrow-b-noline.gif
│   │   │   ├── s-arrow-bo.gif
│   │   │   ├── s-arrow.gif
│   │   │   ├── s-arrow-noline.gif
│   │   │   └── s-arrow-o.gif
│   │   ├── dd
│   │   │   ├── drop-add.gif
│   │   │   ├── drop-no.gif
│   │   │   └── drop-yes.gif
│   │   ├── editor
│   │   │   └── tb-sprite.gif
│   │   ├── form
│   │   │   ├── checkbox.gif
│   │   │   ├── clear-trigger.gif
│   │   │   ├── clear-trigger.psd
│   │   │   ├── date-trigger.gif
│   │   │   ├── date-trigger.psd
│   │   │   ├── error-tip-corners.gif
│   │   │   ├── exclamation.gif
│   │   │   ├── radio.gif
│   │   │   ├── search-trigger.gif
│   │   │   ├── search-trigger.psd
│   │   │   ├── text-bg.gif
│   │   │   ├── trigger.gif
│   │   │   ├── trigger.psd
│   │   │   ├── trigger-square.gif
│   │   │   ├── trigger-square.psd
│   │   │   └── trigger-tpl.gif
│   │   ├── gradient-bg.gif
│   │   ├── grid
│   │   │   ├── arrow-left-white.gif
│   │   │   ├── arrow-right-white.gif
│   │   │   ├── col-move-bottom.gif
│   │   │   ├── col-move-top.gif
│   │   │   ├── columns.gif
│   │   │   ├── dirty.gif
│   │   │   ├── done.gif
│   │   │   ├── drop-no.gif
│   │   │   ├── drop-yes.gif
│   │   │   ├── footer-bg.gif
│   │   │   ├── grid3-hd-btn.gif
│   │   │   ├── grid3-hrow.gif
│   │   │   ├── grid3-hrow-over.gif
│   │   │   ├── grid3-rowheader.gif
│   │   │   ├── grid3-special-col-bg.gif
│   │   │   ├── grid3-special-col-sel-bg.gif
│   │   │   ├── grid-blue-hd.gif
│   │   │   ├── grid-blue-split.gif
│   │   │   ├── grid-hrow.gif
│   │   │   ├── grid-loading.gif
│   │   │   ├── grid-split.gif
│   │   │   ├── grid-vista-hd.gif
│   │   │   ├── group-by.gif
│   │   │   ├── group-collapse.gif
│   │   │   ├── group-expand.gif
│   │   │   ├── group-expand-sprite.gif
│   │   │   ├── hd-pop.gif
│   │   │   ├── hmenu-asc.gif
│   │   │   ├── hmenu-desc.gif
│   │   │   ├── hmenu-lock.gif
│   │   │   ├── hmenu-lock.png
│   │   │   ├── hmenu-unlock.gif
│   │   │   ├── hmenu-unlock.png
│   │   │   ├── invalid_line.gif
│   │   │   ├── loading.gif
│   │   │   ├── mso-hd.gif
│   │   │   ├── nowait.gif
│   │   │   ├── page-first-disabled.gif
│   │   │   ├── page-first.gif
│   │   │   ├── page-last-disabled.gif
│   │   │   ├── page-last.gif
│   │   │   ├── page-next-disabled.gif
│   │   │   ├── page-next.gif
│   │   │   ├── page-prev-disabled.gif
│   │   │   ├── page-prev.gif
│   │   │   ├── pick-button.gif
│   │   │   ├── refresh-disabled.gif
│   │   │   ├── refresh.gif
│   │   │   ├── row-check-sprite.gif
│   │   │   ├── row-expand-sprite.gif
│   │   │   ├── row-over.gif
│   │   │   ├── row-sel.gif
│   │   │   ├── sort_asc.gif
│   │   │   ├── sort_desc.gif
│   │   │   ├── sort-hd.gif
│   │   │   └── wait.gif
│   │   ├── layout
│   │   │   ├── collapse.gif
│   │   │   ├── expand.gif
│   │   │   ├── gradient-bg.gif
│   │   │   ├── mini-bottom.gif
│   │   │   ├── mini-left.gif
│   │   │   ├── mini-right.gif
│   │   │   ├── mini-top.gif
│   │   │   ├── ns-collapse.gif
│   │   │   ├── ns-expand.gif
│   │   │   ├── panel-close.gif
│   │   │   ├── panel-title-bg.gif
│   │   │   ├── panel-title-light-bg.gif
│   │   │   ├── stick.gif
│   │   │   ├── stuck.gif
│   │   │   ├── tab-close.gif
│   │   │   └── tab-close-on.gif
│   │   ├── menu
│   │   │   ├── checked.gif
│   │   │   ├── group-checked.gif
│   │   │   ├── item-over.gif
│   │   │   ├── menu.gif
│   │   │   ├── menu-parent.gif
│   │   │   └── unchecked.gif
│   │   ├── panel
│   │   │   ├── corners-sprite.gif
│   │   │   ├── left-right.gif
│   │   │   ├── light-hd.gif
│   │   │   ├── tool-sprites.gif
│   │   │   ├── tool-sprite-tpl.gif
│   │   │   ├── tools-sprites-trans.gif
│   │   │   ├── top-bottom.gif
│   │   │   ├── top-bottom.png
│   │   │   ├── white-corners-sprite.gif
│   │   │   ├── white-left-right.gif
│   │   │   └── white-top-bottom.gif
│   │   ├── progress
│   │   │   └── progress-bg.gif
│   │   ├── qtip
│   │   │   ├── bg.gif
│   │   │   ├── close.gif
│   │   │   ├── tip-anchor-sprite.gif
│   │   │   └── tip-sprite.gif
│   │   ├── s.gif
│   │   ├── shadow-c.png
│   │   ├── shadow-lr.png
│   │   ├── shadow.png
│   │   ├── shared
│   │   │   ├── blue-loading.gif
│   │   │   ├── calendar.gif
│   │   │   ├── glass-bg.gif
│   │   │   ├── hd-sprite.gif
│   │   │   ├── large-loading.gif
│   │   │   ├── left-btn.gif
│   │   │   ├── loading-balls.gif
│   │   │   ├── right-btn.gif
│   │   │   └── warning.gif
│   │   ├── sizer
│   │   │   ├── e-handle-dark.gif
│   │   │   ├── e-handle.gif
│   │   │   ├── ne-handle-dark.gif
│   │   │   ├── ne-handle.gif
│   │   │   ├── nw-handle-dark.gif
│   │   │   ├── nw-handle.gif
│   │   │   ├── se-handle-dark.gif
│   │   │   ├── se-handle.gif
│   │   │   ├── s-handle-dark.gif
│   │   │   ├── s-handle.gif
│   │   │   ├── square.gif
│   │   │   ├── sw-handle-dark.gif
│   │   │   └── sw-handle.gif
│   │   ├── slider
│   │   │   ├── slider-bg.png
│   │   │   ├── slider-thumb.png
│   │   │   ├── slider-v-bg.png
│   │   │   └── slider-v-thumb.png
│   │   ├── tabs
│   │   │   ├── scroller-bg.gif
│   │   │   ├── scroll-left.gif
│   │   │   ├── scroll-right.gif
│   │   │   ├── tab-btm-inactive-left-bg.gif
│   │   │   ├── tab-btm-inactive-right-bg.gif
│   │   │   ├── tab-btm-left-bg.gif
│   │   │   ├── tab-btm-over-left-bg.gif
│   │   │   ├── tab-btm-over-right-bg.gif
│   │   │   ├── tab-btm-right-bg.gif
│   │   │   ├── tab-close.gif
│   │   │   ├── tabs-sprite.gif
│   │   │   ├── tab-strip-bg.gif
│   │   │   ├── tab-strip-bg.png
│   │   │   └── tab-strip-btm-bg.gif
│   │   ├── toolbar
│   │   │   ├── bg.gif
│   │   │   ├── btn-arrow.gif
│   │   │   ├── btn-arrow-light.gif
│   │   │   ├── btn-over-bg.gif
│   │   │   ├── gray-bg.gif
│   │   │   ├── more.gif
│   │   │   ├── tb-bg.gif
│   │   │   ├── tb-btn-sprite.gif
│   │   │   ├── tb-xl-btn-sprite.gif
│   │   │   └── tb-xl-sep.gif
│   │   ├── tree
│   │   │   ├── arrows.gif
│   │   │   ├── drop-add.gif
│   │   │   ├── drop-between.gif
│   │   │   ├── drop-no.gif
│   │   │   ├── drop-over.gif
│   │   │   ├── drop-under.gif
│   │   │   ├── drop-yes.gif
│   │   │   ├── elbow-end.gif
│   │   │   ├── elbow-end-minus.gif
│   │   │   ├── elbow-end-minus-nl.gif
│   │   │   ├── elbow-end-plus.gif
│   │   │   ├── elbow-end-plus-nl.gif
│   │   │   ├── elbow.gif
│   │   │   ├── elbow-line.gif
│   │   │   ├── elbow-minus.gif
│   │   │   ├── elbow-minus-nl.gif
│   │   │   ├── elbow-plus.gif
│   │   │   ├── elbow-plus-nl.gif
│   │   │   ├── folder.gif
│   │   │   ├── folder-open.gif
│   │   │   ├── leaf.gif
│   │   │   ├── loading.gif
│   │   │   └── s.gif
│   │   └── window
│   │   ├── icon-error.gif
│   │   ├── icon-info.gif
│   │   ├── icon-question.gif
│   │   ├── icon-warning.gif
│   │   ├── left-corners.png
│   │   ├── left-corners.psd
│   │   ├── left-right.png
│   │   ├── left-right.psd
│   │   ├── right-corners.png
│   │   ├── right-corners.psd
│   │   ├── top-bottom.png
│   │   └── top-bottom.psd
│   ├── theboboy
│   │   ├── Ext.ux.grid.RowActions.css
│   │   ├── Ext.ux.grid.RowActions.js
│   │   └── Struts2TreeLoader.js
│   └── ux
│   ├── BufferView.js
│   ├── calendar
│   │   ├── app
│   │   │   ├── calendar-list.js
│   │   │   ├── event-list.js
│   │   │   └── test-app.js
│   │   ├── calendar-all-debug.js
│   │   ├── calendar-all.js
│   │   ├── index.html
│   │   ├── resources
│   │   │   ├── css
│   │   │   │   ├── calendar.css
│   │   │   │   └── examples.css
│   │   │   └── images
│   │   │   └── default
│   │   │   ├── arrow.gif
│   │   │   ├── bg.gif
│   │   │   ├── calendar-sprites.gif
│   │   │   ├── ext-cal-edit-hd.png
│   │   │   ├── page-next.gif
│   │   │   └── page-prev.gif
│   │   └── src
│   │   ├── CalendarPanel.js
│   │   ├── dd
│   │   │   ├── CalendarDD.js
│   │   │   ├── CalendarScrollManager.js
│   │   │   ├── DayViewDD.js
│   │   │   └── StatusProxy.js
│   │   ├── EventEditForm.js
│   │   ├── EventEditWindow.js
│   │   ├── EventRecord.js
│   │   ├── Ext.calendar.js
│   │   ├── templates
│   │   │   ├── BoxLayoutTemplate.js
│   │   │   ├── DayBodyTemplate.js
│   │   │   ├── DayHeaderTemplate.js
│   │   │   ├── DayViewTemplate.js
│   │   │   └── MonthViewTemplate.js
│   │   ├── views
│   │   │   ├── CalendarView.js
│   │   │   ├── DayBodyView.js
│   │   │   ├── DayHeaderView.js
│   │   │   ├── DayView.js
│   │   │   ├── MonthDayDetailView.js
│   │   │   ├── MonthView.js
│   │   │   └── WeekView.js
│   │   ├── WeekEventRenderer.js
│   │   └── widgets
│   │   ├── CalendarPicker.js
│   │   ├── DateRangeField.js
│   │   └── ReminderField.js
│   ├── CenterLayout.js
│   ├── CheckColumn.js
│   ├── ColumnHeaderGroup.js
│   ├── ColumnNodeUI.js
│   ├── css
│   │   ├── CenterLayout.css
│   │   ├── ColumnHeaderGroup.css
│   │   ├── ColumnNodeUI.css
│   │   ├── GroupSummary.css
│   │   ├── GroupTab.css
│   │   ├── LockingGridView.css
│   │   ├── MultiSelect.css
│   │   ├── PanelResizer.css
│   │   ├── Portal.css
│   │   ├── RowEditor.css
│   │   ├── Spinner.css
│   │   └── ux-all.css
│   ├── DataView-more.js
│   ├── DataViewTransition.js
│   ├── DateTimeField.js
│   ├── FieldLabeler.js
│   ├── FieldReplicator.js
│   ├── FileBrowserComponent.js
│   ├── fileuploadfield
│   │   ├── css
│   │   │   └── fileuploadfield.css
│   │   └── FileUploadField.js
│   ├── Focus.js
│   ├── GMapPanel.js
│   ├── gridfilters
│   │   ├── css
│   │   │   ├── GridFilters.css
│   │   │   └── RangeMenu.css
│   │   ├── filter
│   │   │   ├── BooleanFilter.js
│   │   │   ├── DateFilter.js
│   │   │   ├── Filter.js
│   │   │   ├── ListFilter.js
│   │   │   ├── NumericFilter.js
│   │   │   └── StringFilter.js
│   │   ├── GridFilters.js
│   │   ├── images
│   │   │   ├── equals.png
│   │   │   ├── find.png
│   │   │   ├── greater_than.png
│   │   │   ├── less_than.png
│   │   │   ├── sort_filtered_asc.gif
│   │   │   └── sort_filtered_desc.gif
│   │   └── menu
│   │   ├── ListMenu.js
│   │   └── RangeMenu.js
│   ├── gridToExcel.js
│   ├── GroupSummary.js
│   ├── GroupTab.js
│   ├── GroupTabPanel.js
│   ├── images
│   │   ├── bottom2.gif
│   │   ├── down2.gif
│   │   ├── elbow-minus-nl.gif
│   │   ├── elbow-plus-nl.gif
│   │   ├── left2.gif
│   │   ├── panel-handle.gif
│   │   ├── right2.gif
│   │   ├── row-editor-bg.gif
│   │   ├── row-editor-btns.gif
│   │   ├── spinner.gif
│   │   ├── spinner-split.gif
│   │   ├── summary-bg.gif
│   │   ├── summary-group-bg.gif
│   │   ├── top2.gif
│   │   ├── up2.gif
│   │   └── x-grouptabs-corners.gif
│   ├── ItemSelector.js
│   ├── LockingGridView.js
│   ├── MultiSelect.js
│   ├── PagingMemoryProxy.js
│   ├── PanelCollapsedTitle.js
│   ├── PanelResizer.js
│   ├── PortalColumn.js
│   ├── Portal.js
│   ├── Portlet.js
│   ├── ProgressBarPager.js
│   ├── Reorderer.js
│   ├── RowEditor.js
│   ├── RowExpander_3.0.js
│   ├── RowExpander.js
│   ├── RowLayout.js
│   ├── SearchField.js
│   ├── SelectBox.js
│   ├── SlidingPager.js
│   ├── SpinnerField.js
│   ├── Spinner.js
│   ├── Spotlight.js
│   ├── statusbar
│   │   ├── css
│   │   │   └── statusbar.css
│   │   ├── images
│   │   │   ├── accept.png
│   │   │   ├── exclamation.gif
│   │   │   ├── loading.gif
│   │   │   ├── saved.png
│   │   │   └── saving.gif
│   │   ├── StatusBar.js
│   │   └── ValidationStatus.js
│   ├── TabCloseMenu.js
│   ├── TableGrid.js
│   ├── TabScrollerMenu.js
│   ├── ToolbarDroppable.js
│   ├── ToolbarReorderer.js
│   ├── treegrid
│   │   ├── TreeGridColumnResizer.js
│   │   ├── TreeGridColumns.js
│   │   ├── treegrid.css
│   │   ├── TreeGrid.js
│   │   ├── TreeGridLoader.js
│   │   ├── TreeGridNodeUI.js
│   │   └── TreeGridSorter.js
│   ├── ux-all-debug.js
│   ├── ux-all.js
│   └── XmlTreeLoader.js
├── images
│   ├── group.png
│   ├── sis_bg_1px.jpg
│   ├── subscriptions.png
│   ├── templates.png
│   └── tickets.png
├── META-INF
│   └── MANIFEST.MF
├── source
│   ├── 01_CreateTree
│   │   ├── TreePanel.html
│   │   ├── TreePanel.js
│   │   └── 创建一颗树
│   ├── 02_TreeLoader
│   │   ├── TreePanel.html
│   │   ├── TreePanel.js
│   │   └── 使用TreeLoader加载数据生成树
│   ├── 03_Json
│   │   ├── TreePanel.html
│   │   ├── TreePanel.js
│   │   └── 读取本地Json数据生成树
│   ├── 04_Servlet
│   │   ├── TreePanel.html
│   │   ├── TreePanel.js
│   │   └── 使用Servlet提供数据
│   ├── 05_Event
│   │   ├── TreePanel.html
│   │   ├── TreePanel.js
│   │   └── 树的事件
│   ├── 06_ContextMenu
│   │   ├── TreePanel.html
│   │   ├── TreePanel.js
│   │   └── 右键菜单
│   ├── 07_Icon
│   │   ├── TreePanel.html
│   │   ├── TreePanel.js
│   │   └── 修改节点的默认图标
│   ├── 08_Qtip
│   │   ├── TreePanel.html
│   │   ├── TreePanel.js
│   │   └── 给节点增加提示信息
│   ├── 09_Href
│   │   ├── TreePanel.html
│   │   ├── TreePanel.js
│   │   └── 为节点设置超链接
│   ├── 10_TreeEditor
│   │   ├── TreePanel.html
│   │   ├── TreePanel.js
│   │   └── 编辑节点名称
│   ├── 11_NodeDragOver
│   │   ├── TreePanel.html
│   │   ├── TreePanel.js
│   │   └── 树形的拖放
│   ├── 12_NodeDrop
│   │   ├── TreePanel.html
│   │   ├── TreePanel.js
│   │   └── 判断拖放目标
│   ├── 13_TreeDD
│   │   ├── TreePanel.html
│   │   ├── TreePanel.js
│   │   └── 树之间的拖放
│   ├── 14_TreeFilter
│   │   ├── TreePanel.html
│   │   ├── TreePanel.js
│   │   └── 过滤器
│   ├── 15_TreeSorter
│   │   ├── TreePanel.html
│   │   ├── TreePanel.js
│   │   └── 对树进行排序
│   └── 16_TreeChecked
│   ├── TreePanel.html
│   ├── TreePanel.js
│   └── 对树增加复选框
└── WEB-INF
└── web.xml

81 directories, 448 files