examples/tree/check-tree.js

   1 /*!
   2  * Ext JS Library 3.3.1
   3  * Copyright(c) 2006-2010 Sencha Inc.
   4  * licensing@sencha.com
   5  * http://www.sencha.com/license
   6  */
   7
   8 Ext.onReady(function(){
   9     var tree = new Ext.tree.TreePanel({
  10         renderTo:'tree-div',
  11         title: 'My Task List',
  12         height: 300,
  13         width: 400,
  14         useArrows:true,
  15         autoScroll:true,
  16         animate:true,
  17         enableDD:true,
  18         containerScroll: true,
  19         rootVisible: false,
  20         frame: true,
  21         root: {
  22             nodeType: 'async'
  23         },
  24
  25         // auto create TreeLoader
  26         dataUrl: 'check-nodes.json',
  27
  28         listeners: {
  29             'checkchange': function(node, checked){
  30                 if(checked){
  31                     node.getUI().addClass('complete');
  32                 }else{
  33                     node.getUI().removeClass('complete');
  34                 }
  35             }
  36         },
  37
  38         buttons: [{
  39             text: 'Get Completed Tasks',
  40             handler: function(){
  41                 var msg = '', selNodes = tree.getChecked();
  42                 Ext.each(selNodes, function(node){
  43                     if(msg.length > 0){
  44                         msg += ', ';
  45                     }
  46                     msg += node.text;
  47                 });
  48                 Ext.Msg.show({
  49                     title: 'Completed Tasks',
  50                     msg: msg.length > 0 ? msg : 'None',
  51                     icon: Ext.Msg.INFO,
  52                     minWidth: 200,
  53                     buttons: Ext.Msg.OK
  54                 });
  55             }
  56         }]
  57     });
  58
  59     tree.getRootNode().expand(true);
  60 });