树

最新推荐文章于 2023-04-24 20:02:17 发布

阿洲

最新推荐文章于 2023-04-24 20:02:17 发布

阅读量383

点赞数

文章标签：扩展开发工具存储网格 ext 文档

树

树面板组件是在Ext JS中最多才多艺的组件之一，是一个显示应用程序heirarchical数据的优秀工具。树面板延伸网格面板为同一类，因此所有的网格面板的好处-也可以使用树面板功能，扩展和插件。可以预期像列，列大小，拖放，渲染，排序和筛选两个组件同样的工作。

让我们开始创建一个非常简单的树。

 
        
      
 
          
        
 
            分机。创建（“Ext.tree.Panel”，{ 
                renderTo：分机。getBody（） 
                标题：“简单的树” 
                宽度：150， 
                高度：150， 
                根：{ 
                    文字：'根'， 
                    扩大：真实， 
                    儿童：[ 
                        { 
                            文本：“儿童”， 
                            叶：真实 
                        }， 
                        { 
                            文字：“儿童2' ， 
                            叶：真实 
                        }， 
                        { 
                            文本：“儿童3' ， 
                            扩大：真实， 
                            儿童：[ 
                                { 
                                    文字：“孙子” 
                                    叶：真实 
                                } 
                            ] 
                        } 
                    ] 
                } 
            }）; 
              
           

这种树的面板呈现本身的文件体。我们定义了一个根节点，默认情况下，扩大。根节点有三个孩子，其中前两个是叶节点，这意味着他们不能有任何儿童。第三个节点是一个叶节点，并有一个孩子的叶节点。text 属性被用作节点的文本标签。看到现场演示的简单树。

树面板内部存储在一个数据TreeStore。上面的例子中使用的根作为一个快捷方式配置存储的配置。如果我们单独配置商店，代码将看起来像这样：

店=  分机。创建（“Ext.data.TreeStore' ， { 
    根： { 
        文字： '根' ，
        扩大了： 真实，
        儿童： [ 
            { 
                文字： “儿童1 ，
                叶： 真
            }，
            { 
                文字： “独生子女2 ，
                叶： 真
            }，
            ... 
        ] 
    
} } ）;

分机。创建（“Ext.tree.Panel' ， { 
    标题： “简单树” ，
    店店，
    ... 
}）;

看到更多的商店小号的数据手册。

Node接口

在上面的例子中，我们设置一个树节点的不同性质的情侣。但什么是节点完全相同？如前所述，树面板绑定到TreeStore的。在Ext JS商店管理的集合模型的实例。树节点仅仅是一个装饰的模型实例NodeInterface。装潢与NodeInterface模型给出了模型的字段，方法和属性必须要在一棵树上。以下是截图，显示了结构的开发工具中的一个节点。

一个模型实例的NodeInterface装饰

为了看到全套节点上的字段，方法和属性，请参阅API文档为NodeInterface类。

视觉改变你的树

让我们尝试一些简单的。当你设置为true useArrows配置，树面板隐藏的线条和使用展开和折叠图标的箭头。

设置rootVisible属性为false视觉删除根节点。这样，根节点将自动扩大。下面的图像显示同树rootVisible一套虚假和线路设置为false。

根不可见并没有线

多列

由于树面板扩展网格面板，添加更多的列相同的基类是很容易做到。

 
        
      
 
          
        
 
             树 = 分机。创建（“Ext.tree.Panel，{ 
                renderTo：分机。getBody（） 
                标题：“TreeGrid' ， 
                宽度：300， 
                高度：150， 
                字段：[ '名称'，'说明' ]， 
                列：[{ 
                    的xtype：“treecolumn，'， 
                    文字：'名称'， 
                    dataIndex：'名称'， 
                    宽度：150， 
                    排序：真 
                { 
                    文本：“说明”， 
                    dataIndex：“说明”， 
                    软硬度：1 
                    排序：真 
                }]， 
                根：{ 
                    名称：'根'， 
                    描述：“根介绍， 
                    扩大：真实， 
                    儿童：[{ 
                        名称：“儿童”， 
                        说明：“说明”， 
                        叶：真实 
                    { 
                        名称：“儿童2' ， 
                        说明：“说明”， 
                        叶：真实 
                    }] 
                } 
            }）; 
              
           

列配置，预计将有一个数组Ext.grid.column.Column配置就像一个网格面板。唯一不同的是，树小组要求至少有一个列有“treecolumn'的xtype。这种类型的列有像树特定的深度，线条和展开和折叠图标的视觉效果。一个典型的树面板将有只有一个'treecolumn“。

领域的配置是通过对内部创建的商店使用的模型（见数据手册，更多信息模型小号）。请注意，dataIndex列配置如何映射到我们指定的领域-名称和描述。

这也是值得注意的树，没有定义列时，将自动创建一个单一的treecolumn与dataIndex设置为“文本”。它还隐藏在树头。使用时只有一个列设置为“假” 的hideHeaders配置，以显示这个头。

将节点添加到树

为根节点的树面板没有被指定在初始配置。我们总是可以把它添加后：

     1 ，
        叶： 真
    }， { 
        文字： “儿童2 ，
        叶： 真
    }] 
}）;

虽然这是非常有用的，只有少数的静态节点非常小的树木，大部分树面板将包含更多的节点。让我们来看看我们如何可以以编程方式添加新的节点树。

根= 树。getRootNode （）;

父= 根。appendChild （{ 
    文本： “家长1' 
}）;

父。appendChild （{ 
    文字： “孩子3 ，
    叶： 真
}）;

父。扩大（）;

这不是一个叶节点每个节点有一个appendChild方法，它接受一个节点，一个节点作为它的第一个参数的配置对象，并返回被追加的节点。上面的例子还呼吁扩大母公司新创建的扩展方法。

追加到树

也有用的定义创建新的父节点时，儿童内嵌的能力。下面的代码给了我们同样的结果。

父= 根。appendChild （
    文本： “家长” ，
    扩大了： 真实，
    儿童： [{ 
        文字： “儿童3' ，
        叶： 真
    }] 
}）;

有时候，我们希望在树，而不是追加的具体位置插入节点。除了appendChild方法，Ext.data.NodeInterface还提供insertBefore和insertChild方法。

孩子= 父。insertChild （0 ， { 
    文字： “儿童2.5 
    叶： 真
}）;

父。insertBefore （{ 
    文本： “儿童2.75” ，
    叶： 真
}，孩子。nextSibling ）;

insertChild方法，预计指数在该儿童将被插入。InsertBefore方法预计的参考节点。将参考节点之前插入新的节点。

插入树的儿童

NodeInterface还提供了几个属性，可以用来参考其他节点的节点。

nextSibling
previousSibling
parentNode
字符串形式
的firstChild
的ChildNodes

阿洲

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
树

树树面板组件是在Ext JS中最多才多艺的组件之一，是一个显示应用程序heirarchical数据的优秀工具。树面板延伸网格面板为同一类，因此所有的网格面板的好处-也可以使用树面板功能，扩展和插件。可以预期像列，列大小，拖放，渲染，排序和筛选两个组件同样的工作。让我们开始创建一个非常简单的树。
复制链接

扫一扫