Ext Js（4.2）Tree

<span style="font-size:18px;"><script type="text/javascript">
       Ext.onReady(function () {
          var treeExample = Ext.create('Ext.tree.Panel', {
             id: 'tree',
             renderTo: Ext.getBody(),
             //title: 'Simple Tree',
             width: 300,
             height: 500,
             hideHeaders: false,
             useArrows: true,
             rootVisible: false,
             fields: ['name', 'description'],//定义Tree的字段
             columns: [                      //定义Tree列
                         {
                            xtype: 'treecolumn',
                            text: 'Name',
                            dataIndex: 'name',
                            width: 150,
                            sortable: true//允许列排序
                         }, {
                            text: 'Description',
                            dataIndex: 'description',
                            menuDisabled: true,//不显示列的菜单
                            flex: 1,
                            sortable: true
                         }
                      ],
             root://Tree的根节点
                {
                   text: 'Root',
                   expanded: true,//默认张开该节点
                   children: [//定义Tree的子节点
                                 {
                                    name: 'Child 1',
                                    description: 1,
                                    expanded:true,
                                    children: [//定义Tree子节点的子节点
                                                  {
                                                     name: 'Child 1.1',
                                                     description: 1.1,
                                                     leaf: true//定义该节点为叶子节点，该节点不会拥有自己的子节点，即使定义了也不显示
                                                  },
                                                  {
                                                     name: 'Child 1.2',
                                                     description: 1.2,
                                                     leaf: true
                                                  }
                                              ]
                                 },
                                 {
                                    name: 'Child 2',
                                    description: 2,
                                    children: [
                                                  {
                                                     name: 'Child 2.1',
                                                     description: 2.1,
                                                     leaf: true
                                                  },
                                                  {
                                                     name: 'Child 2.2',
                                                     description: 2.2,
                                                     leaf: true
                                                  }
                                              ]
                                 },
                                 {
                                    name: 'Child 3',
                                    description: 3,
                                    expanded: true,
                                    children: [
                                                  {
                                                     name: 'Child 3.1',
                                                     description: 3.1,
                                                     leaf: true
                                                  },
                                                  {
                                                     name: 'Child 3.2',
                                                     description: 3.2,
                                                     leaf: true
                                                  }
                                              ]
                                 }
                              ]
                }

          });
          var win = Ext.create("Ext.window.Window", {//定义Window窗口，关于Window窗口的一些内容可以参考上一篇<a target=_blank target="_blank" href="http://http://blog.csdn.net/u013028110/article/details/42142609">Ext Js（4.2）Window</a>
             resizable: false,
             draggable: false,
             title: "Tree",
             width: 300,
             height: 400,
             layout: "vbox",
             modal: true,
             items: [treeExample]
          });
          win.show();
       });
    </script></span>

Ext.create('Ext.tree.Panel', {   })：定义Tree，在｛｝中添加Tree的配置；

id：为该Tree定义ID，以便在程序中引用；

renderTo：为该Tree定义显示位置；

title：为该Tree定义标题；

width：为该Tree定义宽度；

heigth：为该Tree定义高度；

hideHeaders：定义该Tree是否显示列头；

useArrows：为该Tree定义三角显示模式；

rootVisible：定义该Tree是否显示根节点；

fields：为该Tree定义字段；

columns：为该Tree定义列；

root：为该Tree定义根节点；

更多学习内容可参考本人的该博文：《学习博客、网站》