Extjs树控件介绍VIP专享

树控件： 树是由根节点、叶子节点、非叶子节点（目录节点）组成的，其中根节点只有一个，叶子节点是终端节点。 ext中节点类型有普通树节点和异步加载节点（用于后台交互） ext中提供了节点的选择模型：单选（选择一行） 多选（选择多行） 复选（通过复选框选择） TreePanel用于呈现我们树的面板。TreeNode是树节点，AsyncTreeNode是动态加载树节点（异步树节点）。 既然我们要创建 Tree，首先要创建一个根，当然 ext中根节点也是节点所以统一用 TreeNode进行创建。 TreeNode中 text属性表示节点名称，leaf表示节点是否是叶子节点，id节点的唯一标识，href，hreftarget表示连接地址及打开方式，draggable表示拖拽，checked表示在节点前面是否展现复选框，allowChildren，allowDrag是否允许添加子节点，是否允许拖动等等。这里 text，id是必须的。 我们创建好根之后，就要创建一个树面板(TreePanel)。 TreePanel中的配置选项包含 root属性，根节点。renderto用于渲染的 div Ext.onReady(function(){ var root = new Ext.tree.TreeNode({ id:"root", text:"我是根" }); var tree = new Ext.tree.TreePanel({ renderTo:"hello", root:root, width:200 }); }); 这样一颗简单的树就呈现出来了 好像太简单了 我们就想根节点添加一些节点 Ext.onReady(function(){ var root = new Ext.tree.TreeNode({ id:"root", text:"我是根" }); root.appendChild(new Ext.tree.TreeNode({ id:"c1", text:"我是子节点" })); var tree = new Ext.tree.TreePanel({ renderTo:"hello", root:root, width:200 }); }); 我们发现树的图标发生了改变，可以清晰的看出是否是叶子节点。 我们也可以通过 leaf属性进行指定。但是这里我们即便手动定义了leaf：false也是不起作用的因为他下面没有节点。这一点与树的加载方式有关。 如果下面有子节点我们可以强制定义成 true Ext.onReady(function(){ var root = new Ext.tree.TreeNode({ id:"root", text:"我是根" }); root.appendChild(new Ext.tree.TreeNode({ id:"c1", text:"我是子节点", leaf:false })); var c2 = new Ext.tree.TreeNode({ id:"c2", text:"我是子节点2" }); c2.appendChild(new Ext.tree.TreeNode({ id:"c21", text:"我是子节点2的子节点" })); root.appendChil...