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

HTML Code:

      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

HTML Code:

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

Code:

            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"

.

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

Originally Posted by rkldude

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

Originally Posted by vir2008

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:

HTML Code:

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

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

[2.x]Ext.ux.TreeCheckNodeUI

Thread Tools

Search Thread

Display

[2.x]Ext.ux.TreeCheckNodeUI

[2.x]Ext.ux.TreeCheckNodeUI

Code Get_nodes.jsp

Code Get_nodes.jsp

Javascript error : refused access in TreeLoader

Javascript error : refused access in TreeLoader

Very cool...

Very cool...