ExtJS2笔记-Tree

1.静态加载树
var root = new Ext.tree.TreeNode({text:'Root'});
var node = new Ext.tree.TreeNode({text:'node'});
root.appendChild(node); var tree = new Ext.tree.TreePanel({
        el:'tree',
        root:root                                    //指定根节点
}); tree.render();2.动态加载树(TreeLoader)
var root = new Ext.tree.AsyncTreeNode({text:'Root'});
var tree = new Ext.tree.TreePanel({
        el:'tree',
        root:root,
        loader:new Ext.tree.TreeLoader({dataUrl:'tree.txt | *.jsp | ...'})
}); 需要的JSON格式
[
    {text:'name',children:[...]},
    {text:'name',leaf:true}                    //对于叶子一定记得加上leaf:true
]

加载本地JSON
var root = new Ext.tree.AsyncTreeNode({
        text:'Root',children:[         ]
});

var tree = new Ext.tree.TreePanel({
        el:'tree',
        root:root,
        loader:new Ext.tree.TreeLoader()
});

后台,异步展开
String node = request.getParameter("node"); // 得到该节点的ID值，输出该几点子节点的JSON，由此实现异步
3.自动展开
渲染后加上root.expand(true,true);4.事件
tree.on("事件名",function(node){ }); node只是一个对象，不是dom元素，要用node.ui 获得其view部分contextmenu事件 自定义右键菜单
tree.on("contextmenu",function(node){
        e.preventDefault();                     //屏蔽右键菜单
        node.select();                     
        contextmenu.showAt(e.getXY());         //contextmenu为Ext.menu.Menu对象
});5.修改默认图标
var root = new Ext.tree.TreeNode({
    text:'text'，
    icon:'xxxx.jpg' var root = new Ext.tree.TreeNode({
    text:'text'，
    iconCls:'MALE'
}); .x-tree-node-leaf.MALE{
    background-image:url(xxxxx.jpg);
}6.快速提示 在JSON中加上qtip:'xxxxx'
在js最前面打开快速提示功能Ext.QuickTips.init();7.可编辑树 创建一个TreeEditor, 把TreePanel放入即可
可以对TE添加事件以实现对编辑的控制8.拖拽 创建时加入enableDD:true 或者用
enableDrag enableDrop 分别控制