extjs tree 的使用备忘
来源:互联网 发布:俊知集团 编辑:程序博客网 时间:2024/06/05 10:03
官方文档:
http://www.extjs.com/deploy/ext/docs/
最近用了一次extjs2.0.2 的 tree, 由于以前没用过, 所以用起来挺痛苦的, 边用边查官方的文档.
感觉extjs 的tree 功能很强大, 我也只是学到皮毛, 在这里整理一下所学的东西
用到的元素:
Ext.tree.TreePanel ----ext树的类, 父类是 Ext.data.Tree
Ext.tree.TreeLoader ----ext树节点加载器
Ext.tree.AsyncTreeNode ----ext树异步节点, 父类是 Ext.data.Node
JsonTreeLoader ----自定义的节点加载器
由于我是用json 数据产生节点的, 并且根据数据修改节点的样式, 所以用JsonTreeLoader 继承于 TreeLoader
主要是覆盖 createNode 方法, 产生 createNode 的参数 attr, 然后调用父类TreeLoader 的createNode(attr) 产生节点.
TreeNodeUI -- 找不到文档的一个类, 晕
对象: tree 树对象
tree 中需要定义的属性有 el, loader, root, listeners
el: 对应的页面元素id, 基本是一个div;
loader: JsonTreeLoader 对象, 需要定义的属性有dataUrl, baseParams,
dataUrl 为获取节点数据的连接请求;
baseParams 请求的参数, 数据格式如 baseParams : {id : 1, type: 2}
root: Ext.tree.AsyncTreeNode 对象, 需要定义的属性有 id, text, 当然也可以有自定义的实现, 如type
id 节点的标识字段, 可以用tree.getNodeById(nodeId) 查询到该节点. 这个id 非页面元素的id;
text 根节点的标题;
type 自定义的属性;
listeners: tree 的监听事件, 需要监听的事件有render, click
render 树的呈现;
'render' : function() {
this.loader
.on(
"beforeload",
function(treeLoader, node) { //设置加载子节点的请求的参数
treeLoader.baseParams.id = node.attributes.id;
treeLoader.baseParams.type = node.attributes.type;
});
}
click 节点元素点击事件;
一切OK, 执行tree.render(); //显示树
tree.getRootNode().expand(); //展开根节点
tree.getRootNode().getUI().getEl().click(); //触发根节点的点击事件, 没测试过, 纯猜测
更多的属性和方法请参考
http://www.extjs.com/deploy/ext/docs/output/Ext.tree.TreeNode.html
对象: node 树节点对象
产生节点的方法一:
node 的id, text, iconCls, cls, leaf 都是固定的属性, 并且都有其意义, 并且是大小写敏感的.
详细属性参考:
http://www.extjs.com/deploy/ext/docs/output/Ext.tree.TreeNode.html#configs
http://www.extjs.com/deploy/ext/docs/output/Ext.data.Node.html#configs
再把这个节点 node 添加到另一个节点 下面. (值得注意的是, 要把这个node 注册到 tree里面,不然tree.getNodeById(node.id) 是获取不到该节点的)
产生节点的方法二:
在 createNode(attr) 前, 可以用一个方法处理 attr参数,
用父类的 createNode方法
如果上面的两种操作正确, 那么一个树节点 node 就产生了,
那么这个node 的属性呢, 怎么获取呢 ?
node.id
node.attributes.id
node.attributes.text
node.attributes.type
node.attributes.cls
从上面可以看出, node 的属性都放在attributes 属性里面了
直接 node.attributes.cls = 'newCSS' 是可以改变节点的样式, 但是不提倡
规范点还是要用
node 的获取:
node 的注销
更多的属性和方法请参考:
http://www.extjs.com/deploy/ext/docs/output/Ext.tree.TreeNode.html
Ext.tree.TreeNodeUI
为节点输出而设计,如果想创建自己的ui,应该继承此类
方法
addClass( String/Array className ) : void
增加样式类
getAnchor() : HtmlElement
返回<a>元素
getIconEl() : HtmlElement
返回<img>元素
getTextEl() : HtmlNode
返回文本节点
hide() : void
隐藏
isChecked() : Boolean
选中?
removeClass( String/Array className ) : void
移除样式
show() : void
显示
toggleCheck( Boolean (optional) ) : void
切换选中状态
这个网上找的, 但是应该不止这些而已
下面是 ext-all.js 的东东, 用了一个小时才排好版
- extjs tree 的使用备忘
- extjs tree的使用
- 简单的extjs tree
- 使用extjs的Tree组件时,节点ID设置问题
- ExtJs 一个简单的tree
- extjs tree
- ExtJS Tree
- ExtJS.Tree
- extjs的tree的使用(拖动、动态载入json数据、拖动后的事件处理)
- extjs的tree的使用(拖动、动态载入json数据、拖动后的事件处理)
- 备忘---dumpbin的使用
- hash_map的使用备忘
- fragment的使用--备忘
- Extjs的Tree的部分用法
- extjs的column tree的事件
- Extjs 随笔备忘
- ExtJs备忘2
- extjs 根据tree的操作刷新grid
- 转一篇遇到的eclipse问题
- 在匹配条件中使用日期的表达式
- 分析(Android下的任务和Activity栈)
- 自己动手写iPhone wap浏览器之BSD Socket引擎篇
- PHP的日期时间函数date()
- extjs tree 的使用备忘
- hdu 1042 N! 大数相乘。
- Linux Bash Shell学习(五):特殊文件、别名、选项和参数
- jdbc编程
- grub2 背景图片设置
- 匹配缺少值(空)或零长度字符串的表达式
- 我喜欢你,很久了;等你,也很久了。 现在,我要离开,比很久很久还要久......
- OPENCV 字符串转换 const char * 与CString
- 五分钟搞定WordPress