树的原始备份

ka_wa_yi

浏览: 23961 次
性别:
来自: 北京

最近访客更多访客>>

dzwfeng

dagf113225

yzl495

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

EXT json UI Go HTML

/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.com
* http://www.extjs.com/license
*/

Ext.onReady(function(){
    var tree = new Ext.tree.TreePanel({
        renderTo:'tree-div',
        title: 'My Task List',
        height: 450,
        width: 600,
        useArrows:true,
        autoScroll:true,
        animate:true,
        enableDD:true,
        containerScroll: true,
        rootVisible: false,
        frame: true,
        root: {
            nodeType: 'async'
        },


        dataUrl: 'check-nodes.json',

        buttons: [{
            text: 'Get Completed Tasks',
            handler: function(){
                var msg = '', selNodes = tree.getChecked(); // getNode select return array
                Ext.each(selNodes, function(node){
                    if(msg.length > 0){
                        msg += ', ';
                    }
                    msg += node.text;
                });
                Ext.Msg.show({
                    title: 'Completed Tasks',
                    msg: msg.length > 0 ? msg : 'None',
                    icon: Ext.Msg.INFO,
                    minWidth: 200,
                    buttons: Ext.Msg.OK
                });
            }
        }]
    });

    // tree.on 函数传入参数第一个：事件名，第二个：函数，第三个：Object
    // 全局变量

    tree.on('checkchange', function(node, checked) {
        node.expand();
        node.attributes.checked = checked;
        node.eachChild(function(child) {
            child.ui.toggleCheck(checked);
            child.attributes.checked = checked;
            child.fireEvent('checkchange', child, checked);
        });
    }, tree);

    tree.getRootNode().expand(true);
});

html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Customizing TreePanel</title>
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
    
    <link rel="stylesheet" type="text/css" href="../shared/examples.css" />
    <link rel="stylesheet" type="text/css" href="../ux/css/ColumnNodeUI.css" />
    <link rel="stylesheet" type="text/css" href="column-tree.css" />
    
    
    <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
    
    <script type="text/javascript" src="../../ext-all.js"></script>
    <script type="text/javascript" src="../code-display.js"></script>

    <script type="text/javascript" src="../ux/ColumnNodeUI.js"></script>
    <script type="text/javascript" src="column-tree.js"></script>
    
    <script type="text/javascript" src="../shared/examples.js"></script>
</head>
<body>

    <h1>ColumnTree Example</h1>

    <p>Demonstrates extending the native <tt>Ext.tree.TreePanel</tt> and <tt>Ext.tree.TreeNodeUI</tt>
    to display basic columns via the custom <a href="../ux/ColumnNodeUI.js">Ext.ux.tree.ColumnTree</a>
    and <a href="../ux/ColumnNodeUI.js">Ext.ux.tree.ColumnNodeUI</a> classes.</p>
    <p>The js is not minified so it is readable. See <a href="column-tree.js">column-tree.js</a>.</p>

</body>
</html>

json:

[{
id:1001,
    text: 'To Do',
    checked: false,
    cls: 'folder',
    children: [{
        text: 'Go jogging',
        id:100101,
        checked: false,
        children:[{id:10010101,text:'aaa',leaf:true,checked:false},{id:10010102,text:'bbb',leaf:true,checked:false}]
    },{
        text: 'Take a nap',
        id:100102,
        leaf: true,
        checked: false
    },{
        text: 'Climb Everest',
        id:100103,
        leaf: true,
        checked: false
    }]
},{
    text: 'Grocery List',
    id:1002,
    checked: false,
    cls: 'folder',
    children: [{
        text: 'Bananas',
        id:100201,
        leaf: true,
        checked: false
    },{
        text: 'Milk',
        id:100202,
        leaf: true,
        checked: false
    },{
        text: 'Cereal',
        id:100203,
        leaf: true,
        checked: false
    },{
        text: 'Energy foods',
        id:100204,
        checked: false,
        cls: 'folder',
        children: [{
            text: 'Coffee',
            id:10020401,
            leaf: true,
            checked: false
        },{
            text: 'Red Bull',
            id:10020402,
            leaf: true,
            checked: false
        }]
    }]
},{
    text: 'Remodel Project',
    id:1003,
    checked: false,
    cls: 'folder',
    children: [{
        text: 'Finish the budget',
        id:100301,
        leaf: true,
        checked: false
    },{
        text: 'Call contractors',
        id:100302,
        leaf: true,
        checked: false
    },{
        text: 'Choose design',
        id:100303,
        leaf: true,
        checked: false
    }]
}]

三个文件组装成了一棵树

分享到：

数的成功例子 | 备忘录

2010-08-11 10:40
浏览 686
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论