对于Extjs学习者来说,treepanel的运用是必不可少的,treepanel主要就包括store层和view层,注意store层是Ext.data.TreeStore,与我们常用的Ext.data.Store是属于并列关系,同继承于Ext.data.AbstractStore,因此tree节点都有默认的model,包括allowDrag,allowDrop,checked,cls,depth,expandable,expanded,href,
hrefTarget,icon,iconCls,id,index,isFirst,isLast,leaf,loaded,loading,parentId,qtip,
qtitle,root,text 这些基本字段基本含义名称上已经说的很清楚了,这里不再详述,另外特别需要注意的是,当创建一个新的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几个比较常用的函数。
添加子节点:appendChild(object)
删除节点:appendChild(boolean) 默认为false
查询节点:getChildAt( Number)
展开节点:expand( [Boolean recursive], [Function callback], [Object scope] )
最后的最后,本文如果写的有什么不足,希望大家与我交流,共同学习,共同进步。。。。。。。。。
由于写博客发截图比较麻烦,不过应一楼要求还是发一张吧。。
分享到:
相关推荐
用ExtJS4实现的treepanel与gridpanel的简单互动案例 包含mvc开发模式与普通开发模式两种 普通开发模式:需要在引入js文件夹中的main.js文件 mvc开发模式:需要引入app文件夹中的app.js文件 适合初学extjs4的朋友
完美的Extjs4 treePanel节点刷新,函数为自动刷新选中的节点.API看得头疼才别出来的代码.截止我发之前,好像没有谁共享这个功能的函数吧.
学习TreePanel时根据网上的资料自己实现的实例,结构如下: 1. 创建一棵树 2. 使用TreeLoader加载数据生成树 3. 读取本地Json数据生成树 4. 使用Servlet提供数据 5. 树的事件 6. 右键菜单 7. 修改节点的默认图标 8. ...
获取Extjs中的TreePanel中所有的被checked的叶子节点的id
extjs4 MVC2 TreePanel动态JSON实现 extjs4 MVC2 TreePanel动态JSON实现
本文为大家介绍下extjs4 treepanel如何动态改变行高度,下面有个不错的示例,感兴趣的朋友可以参考下
基于extjs 3.2,右侧折叠面板,然后面板里面包含了树,点击树节点以后,会把树的href里面的地址加载到右边的tabpanel。代码清晰简单。
TreePanel继承自Panel,在ExtJS中使用树控件含有丰富的属性和方法实现复杂的功能。其中Ext.tree.TreeNode代表一个树节点,比较常用的属性包括text、id、icon、checked等、异步树Ext.tree.AsyncTreeNode、树加载器Ext...
本人自己写的Extjs入门教程,上面实现了treePanel和GridPanel的集成和交互。
主要方法: collapseAll():收缩所有树节点 expandAll():展开所有树节点 getRootNode():获取根节点 getNodeById(String id):获取指定id的节点 expand( [Boolean deep], [Boolean anim],
主要介绍了ExtJs动态生成treepanel的Json格式的相关资料,需要的朋友可以参考下
ExtJs TreePanel应用ExtJs TreePanel应用
Extjs4 TreePanel实例 ExtJs4 动态加载 Extjs4 带复选框的树(Checkbox tree) Extjs4 新的布局方式 Extjs4 锁定表头(Locking Grid)功能 Extjs4.0 MVC实例 Extjs4.0动态填充combobox数据 Extjs4中up()和down()的用法...
NULL 博文链接:https://maoyi606.iteye.com/blog/1782825
NULL 博文链接:https://yjzagan2003.iteye.com/blog/1110742
panel的accordion布局以及treepanel动态导航示例
TreePanel的各项属性能帮助我们动态加载extjs tree
Extjs4下拉树菜单 ComboBoxTree 支持单选和多选并且支持展开选中指定节点的通用控件 在项目中已经成熟运用 值得收藏和运用