docs/source/check-tree.html

   1 <html>\r
   2 <head>\r
   3   <title>The source code</title>\r
   4     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
   5     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
   6 </head>\r
   7 <body  onload="prettyPrint();">\r
   8     <pre class="prettyprint lang-js">
   9 Ext.onReady(function(){
  10     var tree = new Ext.tree.TreePanel({
  11         renderTo:'tree-div',
  12         title: 'My Task List',
  13         height: 300,
  14         width: 400,
  15         useArrows:true,
  16         autoScroll:true,
  17         animate:true,
  18         enableDD:true,
  19         containerScroll: true,
  20         rootVisible: false,
  21         frame: true,
  22         root: {
  23             nodeType: 'async'
  24         },
  25
  26         // auto create TreeLoader
  27         dataUrl: 'check-nodes.json',
  28
  29         listeners: {
  30             'checkchange': function(node, checked){
  31                 if(checked){
  32                     node.getUI().addClass('complete');
  33                 }else{
  34                     node.getUI().removeClass('complete');
  35                 }
  36             }
  37         },
  38
  39         buttons: [{
  40             text: 'Get Completed Tasks',
  41             handler: function(){
  42                 var msg = '', selNodes = tree.getChecked();
  43                 Ext.each(selNodes, function(node){
  44                     if(msg.length > 0){
  45                         msg += ', ';
  46                     }
  47                     msg += node.text;
  48                 });
  49                 Ext.Msg.show({
  50                     title: 'Completed Tasks',
  51                     msg: msg.length > 0 ? msg : 'None',
  52                     icon: Ext.Msg.INFO,
  53                     minWidth: 200,
  54                     buttons: Ext.Msg.OK
  55                 });
  56             }
  57         }]
  58     });
  59
  60     tree.getRootNode().expand(true);
  61 });</pre>    \r
  62 </body>\r
  63 </html>