1、树控件的简单应用
树控件由Ext.tree.TreePanel类定义,控件的名称为treepanel,TreePanel类继承自Panel面板。在ExtJS中使用树控件其实非常简单,我们先来看下面的代码:
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:100
});
});
2、树节点Ext.tree.TreeNode
TreeNode代表一个树节点,比较常用的属性包括text、id、icon、checked等。
3、异步树Ext.tree.AsyncTreeNode
在很多时候,树的节点是动态产生的,也就是需要从服务器端的一个url中获得树的节点信息。ExtJS的树控件提供了对这种功能的支持,你只需要在创建树控件的时候,通过给树指定一个节点加载器,就可以从服务器端动态加载树的节点信息。我们来看下面的代码:
var root=new Ext.tree.AsyncTreeNode({
id:"root",
text:"树的根"});
var tree=new Ext.tree.TreePanel({
renderTo:"hello",
root:root,
loader: new Ext.tree.TreeLoader({url:"treedata.js"}),
width:100
});
treedata.js这个url返回的内容如下:
[{
id: 1,
text: '子节点1',
leaf: true
},{
id: 2,
text: '儿子节点2',
children: [{
id: 3,
text: '孙子节点',
leaf: true
}]
}]
4、树加载器Ext.tree.TreeLoader
凡是异步树节点,都需指定一个树加载器,TreeLoader会根据需要,通过Ajax的方式自动从指定的url或内存中加载树节点信息。
可以在准备加载一个树节点之前,更改TreeLoader的相关信息,示例:
myTreeLoader.on("beforeload", function(treeLoader, node) {
this.baseParams.category = node.attributes.category;
}, this);
分享到:
相关推荐
学习YUI.Ext 第五天–关于树TreePanel(Part 1) 效果演示:http://www.ajaxjs.com/yuicn/demos/order_tree.asp 树组件是YUI.Ext 0.40 新增的组件。虽然YUI已经自带有TREE VIEW的组件,但JACK还是决定重新开发...
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
可实现选中父节点,自动选中子节点,选中子节点,自动遍历选中父节点
主要方法: collapseAll():收缩所有树节点 expandAll():展开所有树节点 getRootNode():获取根节点 getNodeById(String id):获取指定id的节点 expand( [Boolean deep], [Boolean anim],
下面将介绍如何异步取一棵树的所有节点,具体做法与官方同步取节点有很大不同,尤其在json的id属性上,下面是我一些摸索,可能不是最佳方案,有待大家一起研究。 异步取节点的思路是这样的: 1、先定义一个初始化...
学习TreePanel时根据网上的资料自己实现的实例,结构如下: 1. 创建一棵树 2. 使用TreeLoader加载数据生成树 3. 读取本地Json数据生成树 4. 使用Servlet提供数据 5. 树的事件 6. 右键菜单 7. 修改节点的默认图标 8. ...
直接可以用的tree,使用JSON。 界面没关 操作方便
完美的Extjs4 treePanel节点刷新,函数为自动刷新选中的节点.API看得头疼才别出来的代码.截止我发之前,好像没有谁共享这个功能的函数吧.
NULL 博文链接:https://huiqinbo.iteye.com/blog/2219418
Ext范例,增删改查,树treePanel,界面设计Viewpoint
基于extjs 3.2,右侧折叠面板,然后面板里面包含了树,点击树节点以后,会把树的href里面的地址加载到右边的tabpanel。代码清晰简单。
代码如下: //树 var treePanel = new Ext.tree.TreePanel({ id:’ptree’, region:’west’, layout:’anchor’, border:false, rootVisible: false, root:{}, listeners:{ render: function() { authorityTree...
而TreePanel的更新也是一个比较常见的问题,当我们点击测试按钮时,TreePanel会请求远程服务器的资源,重新刷新树,从而达到动态更新树的效果,这在实际开发中是非常有用的。 阅读对象:本中心需要使用Ext框架开发的...
TreePanel继承自Panel,在ExtJS中使用树控件含有丰富的属性和方法实现复杂的功能。其中Ext.tree.TreeNode代表一个树节点,比较常用的属性包括text、id、icon、checked等、异步树Ext.tree.AsyncTreeNode、树加载器Ext...
该代码中提供了TreePanel树形菜单的生成代码!而且可以很方便的添加一个右键弹出菜单!(添加一个contextmenu)希望大家多多交流!
一个Coolite TreePanel TabPanel的网站后台框架示例 Coolite 是一个用C#封装了ExtJS的Ajax控件,后台效果的用户体验还是很不错的! 项部是一个图片,左边一棵树形,树形可以从后台配置,点击叶子结点时从Tabs页内依次打开...
Extjs4下拉树菜单 ComboBoxTree 支持单选和多选并且支持展开选中指定节点的通用控件 在项目中已经成熟运用 值得收藏和运用
代码如下: var tree = new Ext.tree.TreePanel({ region:’west’, title:’站点树:’, width:200, minSize:150, maxSize:200, iconCls:’ux-auth-menu-header-icon’, split:true, autoScroll:true, autoHeight:...
extjs 如图,实现带有复选框的树,选中父节点时,选中所有子节点。取消所有子节点时,才能取消根节点。 代码如下: var Fpanel = new Ext.tree.TreePanel({ id:’ptree’, region:’west’, layout:’anchor’, border...