`
qqjavagood
  • 浏览: 99060 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
文章分类
社区版块
存档分类
最新评论

Ext.TreePanel

    博客分类:
  • java
阅读更多
     原文地址 点这里
 
js代码:
ext.onready(function(){  varmytree=newext.tree.treepanel({   el:"container",//应用到的html元素id   animate:true,//以动画形式伸展,收缩子节点   title:"extjs静态树",   collapsible:true,   rootvisible:true,//是否显示根节点   autoscroll:true,   autoheight:true,   width:150,   lines:true,//节点之间连接的横竖线   loader:newext.tree.treeloader(),//   root:newext.tree.asynctreenode({     id:"root",     text:"根节点",//节点名称     expanded:true,//展开     leaf:false,//是否为叶子节点     children:[{text:'子节点一',leaf:true},{id:'child2',text:'子节点二',children:[{text:"111"}]}]   }) }); mytree.render();//不要忘记render()下,不然不显示哦})
 
<span style="color: #ff00ff;">treepanel基本配置参数:</span>
<span style="font-family: courier new;">//treepanel配置参数
1.animate:true//展开,收缩动画,false时,则没有动画效果
2.autoheight:true//自动高度,默认为false
3.enabledrag:true//树的节点可以拖动drag(效果上是),注意不是draggable
4.enabledd:true//不仅可以拖动,还可以通过drag改变节点的层次结构(drap和drop)
5.enabledrop:true//仅仅drop
6.lines:true//节点间的虚线条
7.loader:ext.tree.treeloader//加载节点数据
8.root:ext.tree.treenode//根节点
9.rootvisible:false//false不显示根节点,默认为true
10.trackmouseover:false//false则mouseover无效果
11.usearrows:true//小箭头</span>
 
 
<span style="color: #ff00ff;">treenode的基本配置参数:</span>
 <span style="font-family: courier new;">//treenode常用配置参数
1.checked:false//true则在text前有个选中的复选框,false则text前有个未选中的复选框,默认没有任何框框
2.expanded:fasle//展开,默认不展开
3.href:"http:/www.cnblogs.com"//节点的链接地址
4.hreftarget:"mainframe"//打开节点链接地址默认为blank,可以设置为iframe名称id,则在iframe中打开
5.leaf:true//叶子节点,看情况设置
6.qtip:"提示"//提示信息,不过要ext.quicktips.init();下
7.text:"节点文本"//节点文本
8.singleclickexpand:true//用单击文本展开,默认为双击</span>
 
<span style="font-family: courier new;">js代码:</span>
ext.onready(function(){  ext.quicktips.init(); varmytree=newext.tree.treepanel({   el:"container",   animate:true,   title:"extjs静态树",   collapsible:true,   enabledd:true,   enabledrag:true,   rootvisible:true,   autoscroll:true,   autoheight:true,   width:150,   lines:true });  //根节点 varroot=newext.tree.treenode({   id:"root",   text:"控制面板",   expanded:true });  //第一个子节点及其子节点 varsub1=newext.tree.treenode({   id:"news",   text:"新闻管理",   singleclickexpand:true }); sub1.appendchild(newext.tree.treenode({   id:"addnews",   text:"添加新闻",   href:"http://www.baidu.com",   hreftarget:"mainframe",   qtip:"打开百度",   listeners:{//监听     "click":function(node,e){           alert(node.text)         }   } })); sub1.appendchild(newext.tree.treenode({   id:"editnews",   text:"编辑新闻" })); sub1.appendchild(newext.tree.treenode({   id:"delnews",   text:"删除新闻" }));  root.appendchild(sub1);  root.appendchild(newext.tree.treenode({    id:"sys",    text:"系统设置" }));  mytree.setrootnode(root);//设置根节点  mytree.render();//不要忘记render()下,不然不显示哦})
 
 
html代码:
<bodystyle="margin:10px;">  <divid="container">  </div>  <iframename="mainframe"id="mainframe"height="100px"width="200px"src="jstest.htm"></iframe></body>
 
 
0
6
分享到:
评论

相关推荐

    extjs中Ext.Panel和TreePanel 组件动态加载本地页面数据

    在EXTJS这个强大的JavaScript框架中,`Ext.Panel`和`TreePanel`是两个非常重要的组件,它们被广泛用于构建复杂的用户界面。这篇文章将探讨如何在这些组件中动态加载本地页面数据,以提升用户体验并实现灵活的数据...

    FileTreePanel扩展至Ext.tree.TreePanel附带基本的文件/文件夹管理功能 其它还包括文件上传,重命名

    FileTreePanel扩展至Ext.tree.TreePanel附带基本的文件/文件夹管理功能 其它还包括文件上传,重命名

    Ext.Tree.Panel

    示例代码中,`treePanel.html`定义了HTML结构,`treePanel.js`包含了`TreePanel`的创建和配置。`TreeLoader`的`dataUrl`属性未设置,意味着需要在其他地方动态设置加载数据的URL。 总结,`Ext.Tree.Panel`是EXT JS...

    Ext TreePanel Checked Ext复选框树

    在描述中提到的"Ext TreePanel Checked Ext复选框树"是指`TreePanel`的一种特殊形式,它扩展了基本的树视图,加入了复选框功能。 复选框树(Checked Tree)允许用户通过复选框来选择或取消选择树结构中的节点。这种...

    Ext.tree.TreeLoader附带封装的json类

    var tree = new Ext.tree.TreePanel({ title: '我的树', width: 300, height: 300, rootVisible: false, useArrows: true, loader: new Ext.tree.TreeLoader({ url: 'tree_data.json', // JSON数据文件的URL ...

    treepanel 和 tabpanel 完整

    在本文中,我们将深入探讨`TreePanel`和`TabPanel`这两个重要的Ext JS组件,并讨论如何将它们结合在一起,以创建功能丰富的用户界面。`TreePanel`用于展示层次结构的数据,而`TabPanel`则提供了多标签页的功能,两者...

    获取Extjs中的TreePanel中所有的被checked的叶子节点的id

    var tree = Ext.getCmp('treeId'); // 监听checkchange事件 tree.on('checkchange', function(node) { // 在这里处理被选中的节点 }); ``` #### 2. 使用cascade方法遍历所有节点 `cascade`方法可以遍历TreePanel...

    ext-tree.rar_ext_ext tr_ext tre_ext.tr_ext.tree

    【标题】"ext-tree.rar_ext_ext tr_ext tre_ext.tr_ext.tree" 暗示这是一个关于Ext JS库中TreePanel组件的实例,其中可能包含了用于创建和管理数据结构的树形视图,以及与数据库交互的功能。 【描述】"ext的树的...

    Extjs4 treePanel节点刷新JS函数

    完美的Extjs4 treePanel节点刷新,函数为自动刷新选中的节点.API看得头疼才别出来的代码.截止我发之前,好像没有谁共享这个功能的函数吧.

    [Ext 3.x + Ext 2.x] 下拉树 Ext.ux.ComboBoxTree

    【Ext 3.x + Ext 2.x 下拉树 Ext.ux.ComboBoxTree】是基于ExtJS框架的一个组件,它结合了下拉框(ComboBox)和树形控件(TreePanel)的功能,提供了一种用户友好的选择界面。在网页应用中,这种控件常用于展示层级...

    Ext组件描述,各个组件含义

    **2.12 Tree Panel (Ext.tree.TreePanel)** - **xtype**: `treepanel` - **功能描述**:Tree Panel 是一个树形结构的组件,可以用来展示层次结构的数据。 - **主要用途**:适用于展示目录结构或组织架构图。 **...

    Ext grid panel 滚动条位置不变

    ### Ext grid panel 滚动条位置不变 在前端开发领域,特别是在使用Ext JS框架时,保持滚动条位置不变是一个非常实用的功能。特别是在处理实时数据更新的场景下,这一功能可以确保用户在数据刷新后仍然停留在之前...

    Extjs帮助文档.pdf

    接下来将详细介绍文档中提到的几个核心概念,包括`Ext.MessageBox`、`Ext.Panel`、`Ext.Window`、`Ext.FormPanel`、`Ext.TabPanel`、`Ext.XTemplate`和`Ext.TreePanel`以及如何在Extjs中实现主题(换肤)功能。...

    Ext.net TreePanel的Checkbox操作及父子联动

    在EXT.NET框架中,TreePanel是一个非常重要的组件,它用于展示层次结构的数据,通常用于构建树形目录或层级关系的界面。在这个特定的场景中,我们关注的是TreePanel中的Checkbox功能以及父子节点间的联动效果。 ...

    关于extjs ext.tree

    `ext.tree` 是ExtJS中的TreePanel,它允许开发者创建可交互的树形结构,通常用于展示文件系统、组织架构或层级关系的数据。TreePanel包含一系列的TreeNode,每个TreeNode可以有子节点,形成一个可折叠和展开的层次...

    Ext TreePanel

    【Ext TreePanel】是Ext JS库中的一个组件,主要用于展示层次结构的数据,比如文件系统、组织结构等。TreePanel提供了一种交互式的树形视图,用户可以通过展开、折叠节点来查看和操作数据。 在Ext JS中,TreePanel...

    DWR方式动态加载EXT.Tree

    EXT TreePanel 和 DWR(Direct Web Remoting)是两种在Web开发中常用的技术。EXT TreePanel 是EXT JS库中的一个组件,它用于展示层次结构的数据,通常以树形结构显示,广泛应用于文件系统、组织结构或者菜单的展示。...

    treepanel动态加载数据实现代码

    代码如下: 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:...

    ExtJs3.* 分页树 Ext.ux.tree.PagingTreeLoader

    要使用`Ext.ux.tree.PagingTreeLoader`,你需要配置一个`TreePanel`,并设置其`loader`属性为`PagingTreeLoader`实例。这个加载器需要与一个支持分页的服务器端接口配合,该接口能够根据请求的页码和每页大小返回...

    Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码

    其中Ext.tree.TreeNode代表一个树节点,比较常用的属性包括text、id、icon、checked等、异步树Ext.tree.AsyncTreeNode、树加载器Ext.tree.TreeLoader。下面介绍Extjs 中的 Treepanel 实现菜单级联选中效果。 在 ...

Global site tag (gtag.js) - Google Analytics