PDA

View Full Version : How to change the check tree checked status?



gianli
15 Apr 2010, 7:50 AM
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


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


[{
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


<%@ 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>

mitchellsimoens
15 Apr 2010, 1:49 PM
Code is unreadable so please change this post by editing this post so people can easily read your code.

gianli
15 Apr 2010, 6:09 PM
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


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


[{
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


<%@ 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>