关闭

262人阅读 评论(0) 收藏 举报

树面板组件是在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还提供了几个属性,可以用来参考其他节点的节点。

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:91390次
    • 积分:1196
    • 等级:
    • 排名:千里之外
    • 原创:19篇
    • 转载:7篇
    • 译文:22篇
    • 评论:1条
    文章分类
    文章存档