1. 15 Apr 2010 7:50 AM #1
    gianli
    gianli is offline
    Ext User
    Join Date
    Apr 2010
    Posts
    2
    Vote Rating
    0
    gianli is on a distinguished road
      0  

    Default Unanswered: How to change the check tree checked status?

    Unanswered: How to change the check tree checked status?


    Hello!! In Index.jsp if I choice differen comboBox then the check status will be change.How to do this? For example, if I select "Math" the child "Go" checked change to true. Who can tell me how to do? Thanks! Best wishes!

    check-tree.js
    Code:
    Ext.onReady(function(){
    var tree = new Ext.tree.TreePanel({
        renderTo:'tree-div',
        title: 'CDA Schema',
        height: 500,
        width: 300,
        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){
                if(checked){
                    node.getUI();
                }else{
                    node.getUI().removeClass('complete');
                }
            }
        },
 
        buttons: [{
            text: 'OK',
            handler: function(){
                var msg = '', selNodes = tree.getChecked();
                Ext.each(selNodes, function(node){
                    if(msg.length > 0){
                        msg += ',';
                    }
                    msg += node.id;
                });
                document.form1.hiddenTextBox.value = msg; 
                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-node.json
    Code:
    [{
    text: 'To Do', 
    cls: 'folder',
    children: [{
        id:'Go',
        text: 'Go jogging',
        leaf: true,
        checked: false
    },{
        id:'Take',
        text: 'Take a nap',
        leaf: true,
        checked: false
    },{
        id:'Climb',
        text: 'Climb Everest',
        leaf: true,
        checked: false
    }]
},{
    text: 'Grocery List',
    cls: 'folder',
    children: [{
        id:'Bananas',
        text: 'Bananas',
        leaf: true,
        checked: false
    },{
        id:'Milk',
        text: 'Milk',
        leaf: true,
        checked: false
    },{
        id:'Cereal',
        text: 'Cereal',
        leaf: true,
        checked: false
    },{
        text: 'Energy foods',
        cls: 'folder',
        children: [{
            id:'Coffee',
            text: 'Coffee',
            leaf: true,
            checked: false
        },{
            id:'Red',
            text: 'Red Bull',
            leaf: true,
            checked: false
        }]
    }]
},{
    text: 'Remodel Project', 
    cls: 'folder',
    children: [{
        id:'Choose',
        text: 'Choose design',
        leaf: true,
        checked: false
    }]
}]

    index.jsp
    Code:
    <%@ page language="java" contentType="text/html; charset=BIG5"    pageEncoding="BIG5"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<title>CDA Tool</title>
  <link rel="stylesheet" type="text/css" href="extsrc/resources/css/ext-all.css" />
  <script type="text/javascript" src="extsrc/adapter/ext/ext-base.js"></script>     
  <script type="text/javascript" src="extsrc/ext-all.js"></script>    
  <script type="text/javascript" src="extsrc/localXHR.js"></script>      
  <script type="text/javascript" src="check-tree.js"></script>
  <script type="text/javascript" src="bodyForm.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>
<script>  
  function changeIt() {    
  var index = document.form1.form_name.selectedIndex;    
  if(index==0 || index==1 || index==2){            
    document.getElementById("txt").innerHTML="";                      
  }
  else{            
  document.getElementById("txt").innerHTML="<input type=\"text\" name=\"txtName\">";                          
  }             
}  
  function changeIt2() {    
  var index = document.form1.hospital_name.selectedIndex;    
  if(index==0 || index==1 || index==2){            
  document.getElementById("txt2").innerHTML="";          
  }
  else{            
  document.getElementById("txt2").innerHTML="<input type=\"text\" name=\"txtName\">";                          
  }        
}
</script>
</head>
<body>
<script type="text/javascript" src="../shared/examples.js">
</script>
<!-- EXAMPLES -->
<form name="form1" method="post" action="Table.jsp">
<table>
   <tr>
    <td valign="top">
      <div id="tree-div"></div>
    </td>
    <td  style="padding-left:75" valign="top">
    1.Course name：
    <select name="form_name" onchange="changeIt()">  
       <option value="Math">Math</option>  
       <option value="English">Englisg</option>  
       <option value="Music">Music</option>  
       <option value="Other">Other</option>
    </select>
</form>
</body>
</html>
    Reply With Quote Reply With Quote
  2. 15 Apr 2010 1:49 PM #2
    mitchellsimoens
    mitchellsimoens is offline
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    St. Louis, MO
    Posts
    33,599
    Vote Rating
    434
    Answers
    3102
    mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of
      0  

    Default


    Code is unreadable so please change this post by editing this post so people can easily read your code.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    http://www.JSONPLint.com - Source to lint your JSONP!

    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is almost in print!

    When posting code, please use BBCode's CODE tags.
    Reply With Quote Reply With Quote
  3. 15 Apr 2010 6:09 PM #3
    gianli
    gianli is offline
    Ext User
    Join Date
    Apr 2010
    Posts
    2
    Vote Rating
    0
    gianli is on a distinguished road
      0  

    Default How to change the check tree checked status?

    How to change the check tree checked status?


    Thanks to remind me. I'm so Sorry!!I first time use this. I already change the code format.

    My question:
    In Index.jsp if I choice differen comboBox then the check status will be change.How to do this? For example, if I select "Math" the child "Go" checked change to true. Who can tell me how to do? Thanks! Best wishes!


    check-tree.js
    Code:
    Ext.onReady(function(){
    var tree = new Ext.tree.TreePanel({
        renderTo:'tree-div',
        title: 'CDA Schema',
        height: 500,
        width: 300,
        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){
                if(checked){
                    node.getUI();
                }else{
                    node.getUI().removeClass('complete');
                }
            }
        },
 
        buttons: [{
            text: 'OK',
            handler: function(){
                var msg = '', selNodes = tree.getChecked();
                Ext.each(selNodes, function(node){
                    if(msg.length > 0){
                        msg += ',';
                    }
                    msg += node.id;
                });
                document.form1.hiddenTextBox.value = msg; 
                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-node.json
    Code:
    [{
    text: 'To Do', 
    cls: 'folder',
    children: [{
        id:'Go',
        text: 'Go jogging',
        leaf: true,
        checked: false
    },{
        id:'Take',
        text: 'Take a nap',
        leaf: true,
        checked: false
    },{
        id:'Climb',
        text: 'Climb Everest',
        leaf: true,
        checked: false
    }]
},{
    text: 'Grocery List',
    cls: 'folder',
    children: [{
        id:'Bananas',
        text: 'Bananas',
        leaf: true,
        checked: false
    },{
        id:'Milk',
        text: 'Milk',
        leaf: true,
        checked: false
    },{
        id:'Cereal',
        text: 'Cereal',
        leaf: true,
        checked: false
    },{
        text: 'Energy foods',
        cls: 'folder',
        children: [{
            id:'Coffee',
            text: 'Coffee',
            leaf: true,
            checked: false
        },{
            id:'Red',
            text: 'Red Bull',
            leaf: true,
            checked: false
        }]
    }]
},{
    text: 'Remodel Project', 
    cls: 'folder',
    children: [{
        id:'Choose',
        text: 'Choose design',
        leaf: true,
        checked: false
    }]
}]

    index.jsp
    Code:
    <%@ page language="java" contentType="text/html; charset=BIG5"    pageEncoding="BIG5"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<title>CDA Tool</title>
  <link rel="stylesheet" type="text/css" href="extsrc/resources/css/ext-all.css" />
  <script type="text/javascript" src="extsrc/adapter/ext/ext-base.js"></script>     
  <script type="text/javascript" src="extsrc/ext-all.js"></script>    
  <script type="text/javascript" src="extsrc/localXHR.js"></script>      
  <script type="text/javascript" src="check-tree.js"></script>
  <script type="text/javascript" src="bodyForm.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>
<script>  
  function changeIt() {    
  var index = document.form1.form_name.selectedIndex;    
  if(index==0 || index==1 || index==2){            
    document.getElementById("txt").innerHTML="";                      
  }
  else{            
  document.getElementById("txt").innerHTML="<input type=\"text\" name=\"txtName\">";                          
  }             
}  
  function changeIt2() {    
  var index = document.form1.hospital_name.selectedIndex;    
  if(index==0 || index==1 || index==2){            
  document.getElementById("txt2").innerHTML="";          
  }
  else{            
  document.getElementById("txt2").innerHTML="<input type=\"text\" name=\"txtName\">";                          
  }        
}
</script>
</head>
<body>
<script type="text/javascript" src="../shared/examples.js">
</script>
<!-- EXAMPLES -->
<form name="form1" method="post" action="Table.jsp">
<table>
   <tr>
    <td valign="top">
      <div id="tree-div"></div>
    </td>
    <td  style="padding-left:75" valign="top">
    1.Course name：
    <select name="form_name" onchange="changeIt()">  
       <option value="Math">Math</option>  
       <option value="English">Englisg</option>  
       <option value="Music">Music</option>  
       <option value="Other">Other</option>
    </select>
</form>
</body>
</html>
    Reply With Quote Reply With Quote