PDA

View Full Version : [2.x]Ext.ux.TreeCheckNodeUI



xiexueze
22 Feb 2008, 11:36 PM
Hi all :

the Ext.ux.TreeCheckNodeUI extends Ext.tree.TreeNodeUI class

Some extends features available:

single check model (allow only one treeNode checked)
usage: checkModel: "single"
cascade check model (suport asyn's node loads situation)
usage1: checkModel: "cascade" (check/uncheck childrenNodes and parentNodes)
usage2: checkModel: "parentCascade" (check/uncheck parentNodes)
usage3: checkModel: "childCascade" (check/uncheck childrenNodes)
only leaf node can check model
only when the node's attribute leaf is true,then the node has checkbox
usage: onlyLeafCheckable: true , default is false,all nodes have checkbox


checkModel default is 'multiple' , then all node with checkbox can checked

Supported events:

check (when the node's checkbox value change, will fire this event)


usage:
just add attribute baseAttrs: { uiProvider: Ext.ux.TreeCheckNodeUI } to loader

for example:


var tree = new Ext.tree.TreePanel({
el:'tree-ct',
width:568,
height:300,
checkModel: 'cascade', // cascade check
onlyLeafCheckable: false,// all node have checkbox
animate: false,
rootVisible: false,
autoScroll:true,
loader: new Tree.TreeLoader({
dataUrl:'get-nodes.php',
baseAttrs: { uiProvider: Ext.ux.TreeCheckNodeUI } //add uiProvider attribute
}),
root: new Ext.tree.AsyncTreeNode({ id:'0' })
});
tree.on("check",function(node,checked){
alert(node.text+" = "+checked);
});
tree.render();

xiexueze
23 Feb 2008, 4:24 AM
here is the demo code and a picture

when I checked the "node1_0_0" , then it will auto checked it's parentNodes("folder1","node1_0","node1_0_0"),and load it's childrenNodes("node1_0_0_0"..."node1_0_0_0_5") and checked them


<%@ page language="java" contentType="text/html; charset=GB2312"
pageEncoding="GB2312"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Customizing TreePanel</title>

<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/css/ext-all.css" />

<script src="<%=request.getContextPath() %>/js/ext/ext-base.js"></script>
<script src="<%=request.getContextPath() %>/js/ext/ext-all.js"></script>

<script type="text/javascript" src="TreeCheckNodeUI.js"></script>

<script>
var imagePath = '../../../images';
Ext.BLANK_IMAGE_URL = imagePath+'/default/s.gif';
//Ext.QuickTips.init();
Ext.onReady(function(){
var tree = new Ext.tree.TreePanel({
el:'tree-ct',
width:568,
height:300,
checkModel: 'cascade',
onlyLeafCheckable: false,
animate: false,
rootVisible: false,
autoScroll:true,
loader: new Tree.TreeLoader({
dataUrl:'get-nodes.jsp',
baseAttrs: { uiProvider: Ext.ux.TreeCheckNodeUI }
}),
root: new Ext.tree.AsyncTreeNode({ id:'0' })
});
tree.render();
tree.getEl().center();
});
</script>
</head>
<body>

<div id="tree-ct">

</body>
</html>

vir2008
28 Feb 2008, 2:31 AM
Hello,

I try to implement a TreeCheckNodeUI and I try to find an example of the target JSP script mentionned in the tree loader.
Could you please give me your Get_nodes.jsp script for example?

Thanks in advance.

george.antoniadis
28 Feb 2008, 4:52 AM
The UX is very nice! :)
Thank you very much for sharing!

@vir2008:
The example is a bit broken.
The UX is called Ext.tree.TreePanel and not Ext.ux.TreeCheckNodeUI

Try something like:

loader: new Ext.tree.TreeLoader({
dataUrl:'get-nodes.php',
baseAttrs: { uiProvider: Ext.tree.TreeCheckNodeUI } //add uiProvider attribute
}),

vir2008
28 Feb 2008, 7:50 AM
Thanks for your response.;)

I'm using your code and when I try to display the checkbox tree, I have a javascript error : "refused access line 10" :s.

I think it is linked to my TreeLoader but I don't understand why. Could you help me please? (I'm using ext-2.0.2 release)

My HTML code :

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Customizing TreePanel</title>
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css" />

<script type="text/javascript" src="../ext/adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="../ext/adapter/yui/ext-yui-adapter.js"></script>
<script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext/ext-all.js"></script>
<script type="text/javascript" src="js/TreeCheckNodeUI.js"></script>
<script>
Ext.BLANK_IMAGE_URL = '../ext/resources/images/default/s.gif';

Ext.onReady(function(){
var tree = new Ext.tree.TreePanel({
el:'tree-ct',
width:568,
height:300,
animate: true,
rootVisible: false,
autoScroll:true,
loader: new Ext.tree.TreeLoader({
dataUrl:'jsp/GetData.jsp',
baseAttrs: { uiProvider: Ext.tree.TreeCheckNodeUI }
})
});
var root = new Ext.tree.AsyncTreeNode({
text: 'Ext JS',
id:'source',
type: 'root'
});
tree.setRootNode(root);
tree.render();
root.expand();
});
</script>
</head>
<body>
<div id="tree-ct">
</body>
</html>

My JSP code :

<%= [{ text:'.Net Books',expanded:false,'checked':false,
children:[ {text:'ASP', leaf:true,checked:false}, {text:'C#', leaf:true,checked:false} ]},
{text:'Java Books',expanded:false,'checked':false,
children:[{text:'Advanced Technologies',leaf:false,checked:false,
children:[ {text:'JSP',leaf:true,checked:false},
{text:'JDBC',leaf:true,checked:false},
{text:'Sevlets',leaf:true,checked:false} ]},
{text:'EJB',leaf:false,checked:false,
children:[ {text:'SessionBean',leaf:false,checked:false, children:[ {text:'Stateful',leaf:true},{text:'Stateless',leaf :true} ]},
{text:'EntityBean',leaf:false,checked:false,childr en:[{text:'CMP', leaf:true},{text:'BMP', leaf:true}]},
{text:'MessageDrivenBean',leaf:true,checked:false }
]}
]}] %>

rkldude
29 Feb 2008, 6:34 AM
check your code.... shouldnt it be -
Ext.ux.TreeCheckNodeUI
instead of
Ext.tree.TreeCheckNodeUI

xiexueze
29 Feb 2008, 8:10 AM
check your code.... shouldnt it be -
Ext.ux.TreeCheckNodeUI
instead of
Ext.tree.TreeCheckNodeUI

thanks for rkldude
It's my fault,the uiProvider should be Ext.tree.TreeCheckNodeUI

xiexueze
29 Feb 2008, 8:38 AM
Hello,

I try to implement a TreeCheckNodeUI and I try to find an example of the target JSP script mentionned in the tree loader.
Could you please give me your Get_nodes.jsp script for example?

Thanks in advance.

my getNodes.jsp code is like this:

<%@ page language="java" contentType="text/html; charset=GB2312" %>
<%
String id = request.getParameter("node");
String listNode = "[";

if(id.length()<5){
for(int i=1;i<6;i++){
listNode += "{id:'"+i+"_"+id+"',text:'folder"+i+"_"+id+"'},";
}
listNode = listNode.substring(0,listNode.length()-1) + "]";
out.print(listNode);
}else{
for(int i=1;i<6;i++){
listNode += "{id:'"+i+"_"+id+"',text:'node"+i+"_"+id+"',leaf:true},";
}
listNode = listNode.substring(0,listNode.length()-1) + "]";;
out.print(listNode);
}
%>

vir2008
3 Mar 2008, 8:31 AM
Thanks a lot for your answer. It works fine with this JSP script:).

Moreover, I changed the calling of my jsp page in my html script to resolve the problem "refused access".

dataUrl:'http://server:8080/APPLICATION/jsp/GetData.jsp'

instead of

dataUrl:'jsp/GetData.jsp'

Emachan
12 Mar 2008, 7:38 AM
Nice nice tool! It works perfectly, and has a lot of options.
Thank you very much!

Definitely great!! =D>

I wonder if it could be extended with some extra info...

vir2008
31 Mar 2008, 2:19 AM
About options, do you know if it's possible to display tooltips when the user moves the cursor over the nodes?

Thanks in advance.

badgerd
24 Jun 2008, 10:08 PM
Is it possible to also add an event that also checks the box if the user clicks on the node's text instead of the actual check box?

rainydays
9 Jul 2008, 5:51 AM
Is it possible to also add an event that also checks the box if the user clicks on the node's text instead of the actual check box?

try something like

treepanel.on('click',function(node) {node.ui.toggleCheck();});

JSRobbie
15 Jul 2008, 4:16 AM
Very nice tool ! i'm a beginner but it was simple to setup.
I've tried to include this tree in a form but how can i get results ?

Yours.

Adversus
15 Jul 2008, 2:21 PM
Hi all!

I try to use the TreeCheckNodeUI for my tree-panel. The problem is that i don't use any TreeLoader to fill my TreePanel with nodes. Trying the following to add an node with a checkbox has no success:



[...] = new Ext.tree.TreeNode({ text : data[i][1], iconCls: 'cfdArea', uiProvider: Ext.ux.TreeCheckNodeUI });
...but no error occures. :-? Any ideas?

Thx for help!

bschuhma
20 Aug 2008, 8:25 AM
Has anyone converted this to load an XML file using the XMLTreeLoader?

Thanks,

Bret

jackson_sj
22 Aug 2008, 12:12 AM

skaue
11 Sep 2008, 10:27 AM
Will this work with AsyncTreeNode as well?

PSB
11 Oct 2008, 10:17 AM
checkModel: 'cascade' - not work!
tree.on("check",function(node,checked){alert(node.text+" = "+checked)}) - not work!

i use TreeCheckbox.js and TreeCheckNodeUI.js

my_code:


<script>
Ext.onReady(function(){
var tree = new Ext.tree.TreePanel({
el:'tree-ct',
width:568,
height:300,
checkModel: 'cascade',
onlyLeafCheckable: false,
animate: false,
rootVisible: false,
autoScroll:true,
loader: new Ext.tree.TreeLoader({
dataUrl:"ajax.php?action=show_transaction",
baseParams:{user_id:1,node:0},
baseAttrs: { uiProvider: Ext.ux.TreeCheckNodeUI }
}),
root: new Ext.tree.AsyncTreeNode({ id:'0' })
});
tree.render();
tree.getEl().center();
tree.on("check",function(node,checked){alert(node.text+" = "+checked)});
});
</script>

marco76
9 Nov 2008, 8:19 AM
Hi
I have a question.
MY question is: Is it possible to do that on the first load the childs of nodes that are checked aren't loaded in other words I would that only the check operation was made no the loading of childs ?
Many Thanks

xiexueze
17 Nov 2008, 12:54 AM
Will this work with AsyncTreeNode as well?

yes it works

xiexueze
17 Nov 2008, 12:57 AM
checkModel: 'cascade' - not work!
tree.on("check",function(node,checked){alert(node.text+" = "+checked)}) - not work!

i use TreeCheckbox.js and TreeCheckNodeUI.js

my_code:


<script>
Ext.onReady(function(){
var tree = new Ext.tree.TreePanel({
el:'tree-ct',
width:568,
height:300,
checkModel: 'cascade',
onlyLeafCheckable: false,
animate: false,
rootVisible: false,
autoScroll:true,
loader: new Ext.tree.TreeLoader({
dataUrl:"ajax.php?action=show_transaction",
baseParams:{user_id:1,node:0},
baseAttrs: { uiProvider: Ext.ux.TreeCheckNodeUI }
}),
root: new Ext.tree.AsyncTreeNode({ id:'0' })
});
tree.render();
tree.getEl().center();
tree.on("check",function(node,checked){alert(node.text+" = "+checked)});
});
</script>


it is my fault,the uiProvider name is Ext.tree.TreeCheckNodeUI ,not Ext.ux.TreeCheckNodeUI
but I change to Ext.ux.TreeCheckNodeUI just now

xiexueze
17 Nov 2008, 1:00 AM
Hi all!

I try to use the TreeCheckNodeUI for my tree-panel. The problem is that i don't use any TreeLoader to fill my TreePanel with nodes. Trying the following to add an node with a checkbox has no success:



[...] = new Ext.tree.TreeNode({ text : data[i][1], iconCls: 'cfdArea', uiProvider: Ext.ux.TreeCheckNodeUI });
...but no error occures. :-? Any ideas?

Thx for help!

it is my fault,the uiProvider name is Ext.tree.TreeCheckNodeUI ,not Ext.ux.TreeCheckNodeUI
but I change to Ext.ux.TreeCheckNodeUI just now

huling
8 Feb 2009, 7:33 PM
it work perfectly!
and i need a help.

I want use 'single' model like that,every parents has many children,and a parent node only has one child can be selected.

sothea
20 Feb 2011, 8:53 PM
How can we put the tooltip on this checktree (include icon class and check) when we mouseover on it?