Extjs复习笔记（十八）-- TreePanel

最新推荐文章于 2017-12-28 15:23:35 发布

原创最新推荐文章于 2017-12-28 15:23:35 发布 · 155 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#EXT #json #IDEA #Go

Extjs等js的Ajax框架专栏收录该内容

27 篇文章

订阅专栏

本文介绍如何使用ExtJS中的TreePanel组件创建一个可交互的任务列表。该任务列表包含多个节点，每个节点均可被选中，并支持展开/折叠操作。通过自定义事件监听，实现了对已选中任务的标记及统计。

Grid这一块暂时就讲到这。这一节开始就是tree的相关内容了。

Ext.onReady(function(){
    var tree = new Ext.tree.TreePanel({
        renderTo:'tree-div',
        title: 'My Task List',
        height: 300,
        width: 400,
        useArrows:true, //true to use Vista-style arrows in the tree (defaults to false)
        autoScroll:true, //太多的时候出现滚动条
        animate:true, //有缓慢收缩的效果，默认是有的，所以这句可以不用写
        enableDD:true, //true to enable drag and drop
        containerScroll: true, //true to register this container with ScrollManager
        rootVisible: false, //不显示根结点
        frame: true,
        root: {
            nodeType: 'async' //creates a AsynTreeNode instead of a TreeNode
        },
        /*nodeType: 'async' --> This would be a good idea if you are basing a tree structure on in-memory data which has circular references. Obviously, you don't want all possible child nodes loading because that would cause an error. async means only load child nodes when they are needed.*/

        // auto create TreeLoader
        dataUrl: 'check-nodes.json', //写成一个文件 的格式，我上传了
        
        listeners: { //记住这个形式，加上这句后，当选中一个复选框时就会在当前项上加上删除线
            'checkchange': function(node, checked){
                if(checked){
                    node.getUI().addClass('complete'); 
                }else{
                    node.getUI().removeClass('complete');
                }
            }
        },
        
        buttons: [{
            text: 'Get Completed Tasks',
            handler: function(){
                var msg = '', selNodes = tree.getChecked();//getChecked()：Retrieve an array of checked nodes, or an array of a specific attribute of checked nodes
                Ext.each(selNodes, function(node){ //Ext.each(array, function)是一个循环
                    if(msg.length > 0){
                        msg += ', ';
                    }
                    msg += node.text; //node是其中的默认参数，指selNodes中取出的每一个元素
                }); /*Function:
The function to be called with each item. If the supplied function returns false, iteration stops and this method returns the current index. This function is called with the following arguments:
item : Mixed
The item at the current index in the passed array
index : Number
The current index within the array
allItems : Array
The array passed as the first argument to Ext.each.*/
                Ext.Msg.show({
                    title: 'Completed Tasks', 
                    msg: msg.length > 0 ? msg : 'None',
                    icon: Ext.Msg.INFO,
                    minWidth: 200,
                    buttons: Ext.Msg.OK
                });
            }
        }]
    });

    tree.getRootNode().expand(true); //先获得根结点，再让它全部展开
});

其中check-nodes.json的内容如下：

[{
    text: 'To Do', 
    cls: 'folder',
    children: [{
        text: 'Go jogging',
        leaf: true,
        checked: false
    },{
        text: 'Take a nap',
        leaf: true,
        checked: false
    },{
        text: 'Climb Everest',
        leaf: true,
        checked: false
    }]
},{
    text: 'Grocery List',
    cls: 'folder',
    children: [{
        text: 'Bananas',
        leaf: true,
        checked: false
    },{
        text: 'Milk',
        leaf: true,
        checked: false
    },{
        text: 'Cereal',
        leaf: true,
        checked: false
    },{
        text: 'Energy foods',
        cls: 'folder',
        children: [{
            text: 'Coffee',
            leaf: true,
            checked: false
        },{
            text: 'Red Bull',
            leaf: true,
            checked: false
        }]
    }]
},{
    text: 'Remodel Project', 
    cls: 'folder',
    children: [{
        text: 'Finish the budget',
        leaf: true,
        checked: false
    },{
        text: 'Call contractors',
        leaf: true,
        checked: false
    },{
        text: 'Choose design',
        leaf: true,
        checked: false
    }]
}]