EXT CHECKTREE EXAMPLE 树节点选择样例

此样例依赖EXT3.0

将以下三个文件放在ext3/examples/tree目录下即可

需要部署在WEB服务器上才能正常运行

主要是对原来的样例进行了修改，提供全选功能。

check-tree.js

/*!

 * Ext JS Library 3.0.0

 * Copyright(c) 2006-2009 Ext JS, LLC

 * [e-mail]

 * http://www.extjs.com/license

 */

 

Ext.onReady(function(){

    var tree = new Ext.tree.TreePanel({

        renderTo:'tree-div',

        title: 'My Task List',

        height: 300,

        width: 400,

        useArrows:true,

        autoScroll:true,

        animate:true,

        enableDD:true,

        containerScroll: true,

        rootVisible: false,

        frame: true,

        root: {

            nodeType: 'async'

        },

        

        // auto create TreeLoader

        dataUrl: 'check-nodes.json',

        

        listeners: {

            'checkchange': function(node, checked){

             console.log('------------checkchange----------checked['+checked+']---');

             console.log(node);

             //父节点

             if(false)

             {      

                for(var i=0;i<node.childNodes.length;i++)

                {

                   node.childNodes[i].attributes.checked = checked; 

                   node.childNodes[i].checked=checked;

                   node.childNodes[i].getUI().checkbox.checked = checked;

                }              

             }

             //叶子节点

             else if(true){

                for(var i=0;i<node.childNodes.length;i++)

                {

                   node.childNodes[i].attributes.checked = checked; 

                   node.childNodes[i].checked=checked;

                   node.childNodes[i].getUI().checkbox.checked = checked;               

                   if(node.childNodes[i].childNodes!=undefined)

                   { 

                      var childNode=node.childNodes[i];

                      for(var j=0;j<childNode.childNodes.length;j++)

               {

                  childNode.childNodes[j].attributes.checked = checked; 

                  childNode.childNodes[j].checked=checked;

                  childNode.childNodes[j].getUI().checkbox.checked = checked;                  

               } 

                   }

                } 

                //取消选中

                if(!checked)

                {

                 if(node.parentNode.leaf!=undefined)

                 {

                   node.parentNode.attributes.checked=false;

                   node.parentNode.getUI().checkbox.checked=false;

                   if(node.parentNode.parentNode.leaf!=undefined)

                   {

                     node.parentNode.parentNode.attributes.checked=false;

                     node.parentNode.parentNode.getUI().checkbox.checked=false;

                   }

                 }

                 

                }else

                {

                 var childNodes=node.parentNode.childNodes;

                 var isAllSelect=true;

                 for(var i=0;i<childNodes.length;i++)

                  {

                     //未选中

                     if(!childNodes[i].attributes.checked)

                     { 

                       isAllSelect=false;

                       break;

                     }

                  }

                  //如果是全选 ，则将你节点设置为选中

                  if(isAllSelect)

                  {

                    node.parentNode.attributes.checked=true;

                   node.parentNode.getUI().checkbox.checked=true;

                   

                  }

                }

              

             }

            }

        },

        

        buttons: [{

            text: 'Get Completed Tasks',

            handler: function(){

                var msg = '', selNodes = tree.getChecked();

                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.getRootNode().expand(true);

});

 

check-tree.html

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Checkbox TreePanel</title>

<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

 

    <!-- GC -->

 <!-- LIBS -->

 <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>

 <!-- ENDLIBS -->

 

    <script type="text/javascript" src="../../ext-all.js"></script>

<script type="text/javascript" src="check-tree.js"></script>

 

<!-- Common Styles for the examples -->

<link rel="stylesheet" type="text/css" href="../shared/examples.css" />

 

<style type="text/css">

    .complete .x-tree-node-anchor span {

        text-decoration: line-through;

        color: #777;

    }

</style>

</head>

<body>

<script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->

<h1>Checkbox Selection in a TreePanel</h1>

<p>This example shows simple checkbox selection in a tree. It is enabled on leaf nodes by simply

setting <tt>checked:true/false</tt> at the node level.</p>

<p>This example also shows loading an entire tree structure statically in one load call, rather than

loading each node asynchronously.</p>

<p>The js is not minified so it is readable. See <a href="check-tree.js">check-tree.js</a>.</p>

 

<div id="tree-div"></div>

 

</body>

</html>

check-nodes.json

[{

    text: 'To Do', 

    cls: 'folder',

    leaf: false,

    checked: false,

    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',

    leaf: false,

    checked: false,

    children: [{

        text: 'Bananas',

        leaf: true,

        checked: false

    },{

        text: 'Milk',

        leaf: true,

        checked: false

    },{

        text: 'Cereal',

        leaf: true,

        checked: false

    },{

        text: 'Energy foods',

        cls: 'folder',

        leaf: false,

        checked: false,

        children: [{

            text: 'Coffee',

            leaf: true,

            checked: false

        },{

            text: 'Red Bull',

            leaf: true,

            checked: false

        }]

    }]

},{

    text: 'Remodel Project', 

    cls: 'folder',

    leaf: false,

    checked: false,

    children: [{

        text: 'Finish the budget',

        leaf: true,

        checked: false

    },{

        text: 'Call contractors',

        leaf: true,

        checked: false

    },{

        text: 'Choose design',

        leaf: true,

        checked: false

    }]

 

}]