`
万俟辉夜
  • 浏览: 21537 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

ExtJs4之treepanel

阅读更多

对于Extjs学习者来说,treepanel的运用是必不可少的,treepanel主要就包括store层和view层,注意store层是Ext.data.TreeStore,与我们常用的Ext.data.Store是属于并列关系,同继承于Ext.data.AbstractStore,因此tree节点都有默认的model,包括allowDrag,allowDrop,checkedclsdepthexpandableexpandedhref

hrefTargeticoniconClsidindexisFirstisLastleafloadedloadingparentIdqtip

qtitleroottext 这些基本字段基本含义名称上已经说的很清楚了,这里不再详述,另外特别需要注意的是,当创建一个新的tree节点的时候,可以通过该节点的parentNode调用appendChild方法,如

 

var that = this;
		Ext.MessageBox.prompt('新建目录', '请输入目录名称:', function(btn, text) {
			
			if(btn == "ok") {
				
				var guid = that.getGUID("CatalogServlet", text, nodeId);
				var parentNode = tree.getStore().getNodeById(nodeId);
				var childNode = {
					id : guid,
					text : text,
					url : 'subHTML/CatalogInfo/catalogInfo.html',
					leaf : false,
					children : []
				};
				parentNode.appendChild(childNode);
				parentNode.expand();
			}
		});
 

 

注意看添加节点中可以额外添加新的字段,而且如果要添加一个空的文件夹形式,一定要加上children:[],定义这个字段防止展开该节点的时候会报错,要不整棵树结构就会混乱,treeNode的leaf字段默认是false。

 

 

好了,上面讲了一些小细节问题,下面步入正题。

 

treepanel首先要定义treestore。先贴代码。。。。

 

Ext.define('AM.store.eduStoreTree', {
	extend : 'Ext.data.TreeStore',
//	defaultRootId : 'root',
	proxy : {
		type : 'ajax',
		url : 'CatalogServlet',
		extraParams : {
			cmd : 'findRoots'
		},
		reader : {
			type : 'json'
		}
	},
	listeners : {
		
		'beforeexpand' : function(parentNode, eOpts) {
			var guid = parentNode.data.id;
			Ext.Ajax.request({
				url : 'CatalogServlet',
				params : {
					guid : guid,
					cmd : 'getAll'
				},
				success : function(response) {
										
					parentNode.removeAll(true);
					eval("var childNodes = " + response.responseText);
					Ext.each(childNodes, function(node) {
						if(node == null) {
							return;
						}
						parentNode.appendChild(node);
					});
				}
			});
		}
	},
	
	autoLoad : true
});

 treestore主要就定义proxy来异步加载数据,proxy中定义url来指定访问服务器路径,有extraParams来添加额外参数,若服务器返回的json字段名与上面列举的model中字段名一致,则自动赋值上去。其实是treeNode中定义了一个属性raw,服务器中传来的json对象全都存储在raw中,所以也可以通过raw属性取值。

 

上面代码取的只是树单层的数据,也可以一次性把数据全部都取出来,这样必须在返回给客户端的数据中每个父节点都添加一个字段属性children,其中填放子节点。转换成json形如:

 

{'children':[{'children':[{'children':[{'children':[],'id':0111,'leaf':true,'text':'万俟辉夜1','url':'#'}],'id':011,'leaf':false,'text':'万俟辉夜2','url':''}
 

也可以通过异步加载,看代码listeners定义了一个beforeexpand事件监听,当点击展开树节点时,会重新像服务器发送ajax请求数据,这样避免了去大量数据的耗时等待。

 

 

最后就是tree的view层代码编写了,照例先贴代码:

 

Ext.define('AM.view.eduTree',{
	extend : 'Ext.tree.Panel',
	alias :'widget.edutree',
	rootVisible : false,
	store : 'eduStoreTree',
	frame : true,
	animate : true
	
/*	viewConfig : {
		plugins :
		{
			ptype : 'treeviewdragdrop',
			appendOnly : true
		},
		listeners : {
			beforedrop : function(node, data, overModel, dropPosition, dropFunction, eOpts) {
				
			},
			drop : function(node, data, overModel, dropPosition, eOpts ) {
				
			//	alert("把:" + data.records[0].get('text') + "移动到:" + overModel.get('text'));
				Ext.Ajax.request({
					
					url: 'CatalogServlet',
				    params: {
				        cmd : 'test',
				        guid : data.records[0].get('id'),
				        catalogParent : overModel.get('id')
				    },
				    method : 'GET',
				    success: function(response){
				    }
				});
				
			}
		}
	}*/
});

 tree中只需要定义之前写好的store就行了,其他的属性都比较好说,大家可以在官网api中查到,上面的说明都比较详细,也可以锻炼大家浏览英文文档的能力。frame和animate都是美观树的样式和行为。一般都可以加上去。另外,extjs4中提供了tree的拖拽功能,如上代码中在viewconfig中定义treeviewdragdrop,然后就可以监听beforedrop和drop事件, 例子上写的还比较详细。

 

tree节点的监听:

 

'[id=edu-tree]' : {
				'itemclick' : function(view,record){
					this.TreeDoActionUtil.doClick(view,record);
		        },
		        'itemcontextmenu' : function(view, record, item, index, e, eOpts ) {
		        	this.TreeDoActionUtil.doItemcontextmenu(view, record, item, index, e, eOpts);
		        }
			},

 上面是mvc结构写的,大家可以直接在tree的view层直接定义listeners,然后里面监听的代码一样。注意监听的名称与extjs3不同,另外右键监听的时候要阻止浏览器默认的右键监听,需加上

 

e.preventDefault();
e.stopEvent();   //屏蔽浏览器默认的右击事件
 

 

最后,介绍几个treeNode几个比较常用的函数。

添加子节点:(object)

删除节点:(boolean)    默认为false

查询节点:Number)

展开节点:[Boolean recursive], [Function callback], [Object scope] )

 

 

最后的最后,本文如果写的有什么不足,希望大家与我交流,共同学习,共同进步。。。。。。。。。

 

由于写博客发截图比较麻烦,不过应一楼要求还是发一张吧。。

extjs4之treepanel

2
0
分享到:
评论
6 楼 yufylovefl 2014-01-03  
讲的比较详细
5 楼 万俟辉夜 2012-10-18  
yeping 写道
楼主,有没有点击树,右侧panel更换不同内容的实例吗?有的请发邮箱  563237057@qq.com !!!谢谢!!!!

你可以在树的每个节点上都添加一个url属性,右侧panel中存放个iframe,然后响应树节点点击事件,利用javascript改变iframe中的src。
4 楼 yeping 2012-10-11  
楼主,有没有点击树,右侧panel更换不同内容的实例吗?有的请发邮箱  563237057@qq.com !!!谢谢!!!!
3 楼 zhengeili 2012-09-19  
挺好  希望楼主 多写些
2 楼 万俟辉夜 2012-09-17  
bewithme 写道
老大你至少发个图嘛

已发。。。
1 楼 bewithme 2012-09-17  
老大你至少发个图嘛

相关推荐

    Extjs4 treePanel节点刷新JS函数

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

    ExtJS4 treepanel与girdpanel简单案例(包括MVC模式与非MVC模式)

    用ExtJS4实现的treepanel与gridpanel的简单互动案例 包含mvc开发模式与普通开发模式两种 普通开发模式:需要在引入js文件夹中的main.js文件 mvc开发模式:需要引入app文件夹中的app.js文件 适合初学extjs4的朋友

    Extjs做的treepanel+tab切换页

    在"Extjs 做的treepanel+tab切换页"这个项目中,我们主要关注的是如何利用ExtJS 3.2版本来创建一个具备折叠面板(Collapsible Panel)功能的树形视图(TreePanel),以及与之联动的选项卡(TabPanel)。这个设计允许...

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

    在本篇文章中,我们将深入探讨如何在ExtJS框架中获取TreePanel中所有被选中(checked)的叶子节点的ID。此技术对于处理复杂的数据结构、优化用户交互体验以及实现高效的数据管理至关重要。 ### 一、ExtJS简介 ...

    ExtJS 3.4关于TreePanel的一些实例

    学习TreePanel时根据网上的资料自己实现的实例,结构如下: 1. 创建一棵树 2. 使用TreeLoader加载数据生成树 3. 读取本地Json数据生成树 4. 使用Servlet提供数据 5. 树的事件 6. 右键菜单 7. 修改节点的默认图标 8. ...

    ExtJS_TreePanel_树的配置详细属性

    主要方法: collapseAll():收缩所有树节点 expandAll():展开所有树节点 getRootNode():获取根节点 getNodeById(String id):获取指定id的节点 expand( [Boolean deep], [Boolean anim],

    extjs4 treepanel动态改变行高度示例

    在本文中,我们将探讨ExtJS 4框架中的TreePanel组件如何动态地改变行高。TreePanel是ExtJS中用于展示树形结构数据的组件,它通常用于显示文件系统结构、组织架构等层次化数据。动态改变行高是提高用户界面友好性和...

    Extjs入门教程(treePanel和GridPanel)

    TreePanel是ExtJS中的一个树形控件,它允许你展示层级结构的数据。在教程中,你可能会学到如何创建和配置TreePanel,包括加载数据、设置节点图标、处理节点的展开和折叠事件,以及添加拖放功能。TreePanel通常用于...

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

    TreePanel继承自Panel,在ExtJS中使用树控件含有丰富的属性和方法实现复杂的功能。其中Ext.tree.TreeNode代表一个树节点,比较常用的属性包括text、id、icon、checked等、异步树Ext.tree.AsyncTreeNode、树加载器Ext...

    extjs4 MVC2 TreePanel动态JSON实现

    根据提供的文件信息,我们可以深入探讨如何在ExtJS4框架中使用MVC2模式下的TreePanel组件结合动态JSON数据实现树形结构的展示与交互。以下将详细解释代码中涉及的关键概念和技术要点: ### 1. 创建TreeStore实例 ...

    Extjs开发之对于TreePanel的MultiSelectionModel重置不起作用

    4. **数据源同步**:如果你的数据源(如Store)在后台进行了更新,但是TreePanel没有重新加载,那么选中状态的改变可能不会反映到界面上。确保在数据源更新后,调用了`store.load()`来刷新TreePanel。 5. **渲染...

    extJs3升级extjs4方案

    而在 ExtJS4 中,我们需要使用以下代码来创建一个 TreePanel: ```javascript var ptree = Ext.create('Ext.data.TreeStore', { // ... }); ``` 可以看到,ExtJS4 使用 Ext.create 函数来创建组件类,这样可以...

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

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

    extjs4中panel的accordion布局以及treepanel导航

    在EXTJS4中,Panel和TreePanel是两个非常重要的组件,它们在构建用户界面时扮演着核心角色。本文将深入探讨Panel的accordion布局以及TreePanel的动态导航功能,帮助开发者更好地理解和运用这些特性。 首先,让我们...

    无废话ExtJs 系列教程十五[树:TreePanel]

    《无废话ExtJs系列教程十五:树:TreePanel》 ExtJs是一个强大的JavaScript库,用于构建富客户端Web应用。在本教程中,我们将深入探讨一个重要的组件——TreePanel,它是ExtJs用来展示层次结构数据的工具,常用于...

    extjs TreePanel

    EXTJS中的TreePanel是用于展示层级数据的组件,它以树状结构呈现数据。TreePanel提供了丰富的配置项和方法,使得我们可以灵活地控制树的显示和交互。以下是对TreePanel及其主要配置项和方法的详细说明: 1. **主要...

    ExtJS4中文教程2 开发笔记 chm

    Extjs4 TreePanel实例 ExtJs4 动态加载 Extjs4 带复选框的树(Checkbox tree) Extjs4 新的布局方式 Extjs4 锁定表头(Locking Grid)功能 Extjs4.0 MVC实例 Extjs4.0动态填充combobox数据 Extjs4中up()和down()的用法...

    Extjs4下拉树菜单ComboBoxTree支持单选和多选并且支持展开选中指定节点的通用控件

    ComboBoxTree是ExtJS4中的一个自定义组件,它结合了ComboBox(下拉框)和TreePanel(树形面板)的功能。ComboBox通常用于提供一个下拉列表供用户选择,而TreePanel则用于展示层次结构的数据。ComboBoxTree将这两者...

Global site tag (gtag.js) - Google Analytics