Ext JS 深入浅出 树形结构（上）

1、开发环境

系统 Windows 10 ，VS 2015 ，Ext Js 4.1

2、准备工作

打开VS ，新建项目，新建空白解决方案，如下图所示：

在空白解决方案中新建网站，如果网站名重复，则修改名称即可。如下所示：

保存项目后新建一个Html页面，如下所示：

最后引入Ext JS 文件，地址：点击打开链接  密码：wip0 ，将文件复制到项目中，如下所示。

3、创建一棵树

树控件由Ext.tree.TreePanel 类定义，控件名称为TreePanel 。编辑 TreePanel.html 页面如下：

运行结果如下所示：

代码解释：

   var tree = new Ext.tree.TreePanel({
                store: new Ext.data.TreeStore({
                    root: {
                        text: '我是根',
                        leaf:true
                    }
                })
            });
        tree.render('tree');

这里的参数 tree 表示渲染的Dom 的 id ，在HTML 中，有 <div id =“tree”></div>与之相对应，最后这棵树就出现在 div 的位置上。

4、为树添加枝叶

上面已经添加了一棵只有根的树，接下来就是添加枝叶了，具体实现请阅读

Ext JS 深入浅出 树形结构（下）

源代码下载： 点击打开链接