翻译 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还提供了几个属性,可以用来参考其他节点的节点。

相关文章推荐

动态下拉树

MEGA7.0进化树分析工具

  • 2017-10-10 09:07
  • 30.81MB
  • 下载

福州大学第十四届程序设计竞赛_重现赛 J - 英语考试 (最小生成树 )

在过三个礼拜,YellowStar有一场专业英语考试,因此它必须着手开始复习。 这天,YellowStar准备了n个需要背的单词,每个单词的长度均为m。 YellowSatr准备采用联想记忆法来背...

TOJ 4325 RMQ with Shifts(线段树的单点更新)

In the traditional RMQ (Range Minimum Query) problem, we have a static array A. Then for each query ...

递归的方式创建二叉树

  • 2017-08-17 14:25
  • 211KB
  • 下载

二叉树的锯齿形层次遍历

给出一棵二叉树,返回其节点值的锯齿形层次遍历(先从左往右,下一层再从右往左,层与层之间交替进行)  样例 给出一棵二叉树 {3,9,20,#,#,15,7},     3    / \   ...

Unity结构树

  • 2017-08-18 18:32
  • 20KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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