1. #1
    Ext User
    Join Date
    Jul 2007
    Posts
    24
    Vote Rating
    -1
    xiexueze has a little shameless behaviour in the past

      0  

    Default [2.x]Ext.ux.TreeCheckNodeUI

    [2.x]Ext.ux.TreeCheckNodeUI


    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();
    Attached Files

  2. #2
    Ext User
    Join Date
    Jul 2007
    Posts
    24
    Vote Rating
    -1
    xiexueze has a little shameless behaviour in the past

      0  

    Default


    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>
    Attached Images

  3. #3
    Ext User
    Join Date
    Feb 2008
    Posts
    8
    Vote Rating
    0
    vir2008 is on a distinguished road

      0  

    Question Code Get_nodes.jsp

    Code Get_nodes.jsp


    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.

  4. #4
    Sencha User george.antoniadis's Avatar
    Join Date
    Jul 2007
    Posts
    107
    Vote Rating
    1
    george.antoniadis is on a distinguished road

      0  

    Default


    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
                }),

  5. #5
    Ext User
    Join Date
    Feb 2008
    Posts
    8
    Vote Rating
    0
    vir2008 is on a distinguished road

      0  

    Red face Javascript error : refused access in TreeLoader

    Javascript error : refused access in TreeLoader


    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 }
    ]}
    ]}] %>

  6. #6
    Ext User
    Join Date
    Jul 2007
    Posts
    4
    Vote Rating
    0
    rkldude is on a distinguished road

      0  

    Default


    check your code.... shouldnt it be -
    Ext.ux.TreeCheckNodeUI
    instead of
    Ext.tree.TreeCheckNodeUI

  7. #7
    Ext User
    Join Date
    Jul 2007
    Posts
    24
    Vote Rating
    -1
    xiexueze has a little shameless behaviour in the past

      0  

    Default


    Quote Originally Posted by rkldude View Post
    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

  8. #8
    Ext User
    Join Date
    Jul 2007
    Posts
    24
    Vote Rating
    -1
    xiexueze has a little shameless behaviour in the past

      0  

    Default


    Quote Originally Posted by vir2008 View Post
    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);
    	}
    %>

  9. #9
    Ext User
    Join Date
    Feb 2008
    Posts
    8
    Vote Rating
    0
    vir2008 is on a distinguished road

      0  

    Post


    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'

  10. #10
    Ext User
    Join Date
    Dec 2007
    Location
    Italy
    Posts
    32
    Vote Rating
    0
    Emachan is on a distinguished road

      0  

    Default Very cool...

    Very cool...


    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...
    Make it happen...

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar