翻译 2012年03月29日 23:11:25

树面板组件是在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.grid.column.Column配置就像一个网格面板唯一不同的是,树小组要求至少有一个列有“treecolumn'的xtype。这种类型的列有像树特定的深度,线条和展 ​​开和折叠图标的视觉效果。一个典型的树面板将有只有一个'treecolumn“。

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

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

将节点添加到树

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

     1  
    }, { 
        文字 “儿童2  
    }] 
});

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

= getRootNode ();

= appendChild ({ 
    文本 “家长1' 
});
appendChild ({ 
    文字 “孩子3  
});
扩大();

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

追加到树

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

= appendChild 
    文本 “家长” 
    扩大了 真实
    儿童 [{ 
        文字 “儿童3'  
    }] 
});

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

孩子= insertChild 0  { 
    文字 “儿童2.5  
});
insertBefore ({ 
    文本 “儿童2.75”  
},孩子nextSibling );

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

插入树的儿童

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

二叉树按层次遍历的递归用法

对于在学数据结构的大家,在编写二叉树的按层次遍历时往往会用非递归的方法,或许有人会问可不可以用递归来做呢? 对此,小编的答案是可以的。 相对于非递归,递归稍微要复杂些(这是由于二叉树中递归左子树递归右...

给定N个节点求组成二叉搜索树个数——从一道算法题探讨神奇的Catalan数

引Catalan数,中文卡特兰数又称卡塔兰数,是组合数学中一个常出现在各种计数问题中的数列。一旦入坑,你会发现这个数列相当有意思,能够应用于很多看起来特别复杂的计算场景,当然,并能将之迎刃而解。 ...

ztree实现目录树

  • 2017年11月29日 08:58
  • 3KB
  • 下载

决策树算法

  • 2017年11月21日 19:26
  • 382KB
  • 下载

数据结构 三:树(Tree)

一、树(Tree)的定义 1、树(Tree)是n(n≥0)个结点的有限集。n=0时称为空树。在任意一颗非空树中: (1)有且有一个特定的称为根(Root)的结点; (2)当n>1时,其...

MFC实现的动态红黑树演示

  • 2017年11月20日 20:35
  • 49.78MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:
举报原因:
原因补充:

(最多只允许输入30个字)