1. #1
    Ext User
    Join Date
    Mar 2007
    Posts
    65
    Vote Rating
    0
    thameema is on a distinguished road

      0  

    Default TreePanel with Context Menu

    TreePanel with Context Menu


    I have been searching on the internet for a good example about making a TreeView or TreePanel with contextmenu and couldn't find any. I used 0.40 yui-ext and latest yui libraries and after 2 days of struggling finally got something working. Here is the detailed explanation with code.

    First I made yuitest.html

    Code:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title> TreePanel</title>
    
      <script type="text/javascript" src="lib/yahoo/yahoo.js"></script>
      <script type="text/javascript" src="lib/event/event.js"></script>  
      <script type="text/javascript" src="lib/dom/dom.js"></script>
      <script type="text/javascript" src="lib/container/container_core.js"></script>
      <script type="text/javascript" src="lib/menu/menu.js" ></script> 
      <script type="text/javascript" src="lib/treeview/treeview.js" ></script>
      <script type="text/javascript" src="lib/utilities/utilities.js"></script>
      
      <script type="text/javascript" src="yui-ext-0.40/jscripts/yui-ext.js"></script>
      
    
    
    <link rel="stylesheet" type="text/css" href="yui-ext-0.40/css/yui-ext.css" />
    <link rel="stylesheet" type="text/css" href="css/menu.css" />
    <link rel="stylesheet" type="text/css" href="examples.css" />
    <link rel="stylesheet" type="text/css" href="lib/reset/reset.css">
    <link rel="stylesheet" type="text/css" href="lib/fonts/fonts.css">
    
    <script type="text/javascript">
    
        // shorthand
        var Tree = YAHOO.ext.tree;
        var tree;
        var root;
      
    	 function init(){
                tree = new Tree.TreePanel('tree-div', {
                    animate:true, 
    		
    		loader: new Tree.TreeLoader({dataUrl:"http://localhost/test.php",
    				baseParams: {}
    					   }),
                    enableDD:true,
                    containerScroll: true
                });
                
                // set the root node
                root = new Tree.AsyncTreeNode({
                    text: 'yui-ext', 
                    draggable:false, 
                    id:'mainportal'
                });
                tree.setRootNode(root);
                	    
                // render the tree
                tree.render();	    
                root.expand();
    	    	    
            };
    	
    	function assignConmenu() {
    	   if(root.isLoaded()){
    	     var children = root.childNodes;
    	     //alert("test:"+children);
    	     
    	     for ( var i=0; i < children.length; i++ ) {
    	     		
    		   children[i].on("contextmenu", conMenu, children[i], true);		   
    		   console.log("timesd:"+i);		    
    	     }
    	    }
    	};
    	
    	function conMenu() {
    	      var aMenuItems = [ {text: "Cut"},{text:"Copy"},{text:"Paste"} ];
    	      
    	      //if( typeof oContextMenu != "undefined"){alert("contextmenu exist");oContextMenu.destroy;}
    	      if ( typeof oContextMenu != "undefined"){
    	      	oContextMenu.destroy();
    	      }
    	            
    	      this.select(); //to make the right clicked menu node highlighted..remove if you don't need it.
    	      oContextMenu = new YAHOO.widget.ContextMenu(
    		      "otmenu",
    		      {
    			      trigger: this.ui.elNode.id,			      
    			      itemdata: aMenuItems,
    			      lazyload: true
    		      }
    		      );
    
    	      oContextMenu.renderEvent.subscribe(onContextMenuRender, oContextMenu, true);
    	      
    	      
    	};
     	
    	function onContextMenuRender(p_sType,p_aArgs, p_oMenu) {
    		//alert("inside context menu render");
    		this.clickEvent.subscribe(onContextMenuClick, this, true);
    	};
    	
    	function onContextMenuClick(p_sType,p_aArgs, p_oMenu) {
    		alert("u have clicked");
    	};
    
    	YAHOO.ext.EventManager.onDocumentReady(init);
    	YAHOO.ext.EventManager.on(window,"load",assignConmenu, assignConmenu, true);
    </script>
    
    </head>
    <body>
    
    <div id="tree-div" style="overflow:auto; height:300px;width:250px;border:1px solid #c3daf9;"></div>
    
    </body>
    </html>
    and test.php has the following contents, put this under apache document root and it will return the JSON object when XHR happens from the TreeLoader.

    Code:
    [{"text":"yui-ext.js","id":"yui-ext.js","leaf":true,"cls":"file"},{"text":"yui-ext-1125.php","id":"yui-ext-1125.php","leaf":true,"cls":"file"}]
    The above example uses all yui-ext and yui libraries. In addition to that i am also copied the menu.css from yui example. Here is the menu.css code.

    Code:
    /*
    Copyright (c) 2006, Yahoo! Inc. All rights reserved.
    Code licensed under the BSD License:
    http://developer.yahoo.com/yui/license.txt
    Version: 0.12.1
    */
    
    
    
    /* Menu styles */
    
    div.yuimenu {
    
        background-color:#f6f7ee;
        border:solid 1px #c4c4be;
        padding:1px;
        
    }
    
    /* Submenus are positioned absolute and hidden by default */
    
    div.yuimenu div.yuimenu,
    div.yuimenubar div.yuimenu {
    
        position:absolute;
        visibility:hidden;
    
    }
    
    /* MenuBar Styles */
    
    div.yuimenubar {
    
        background-color:#f6f7ee;
        
    }
    
    /*
        Applying a width triggers "haslayout" in IE so that the module's
        body clears its floated elements
    */
    div.yuimenubar div.bd {
    
        width:100%;
    
    }
    
    /*
        Clear the module body for other browsers
    */
    div.yuimenubar div.bd:after {
    
        content:'.';
        display:block;
        clear:both;
        visibility:hidden;
        height:0;
    
    }
    
    
    /* Matches the group title (H6) inside a Menu or MenuBar instance */
    
    div.yuimenu h6,
    div.yuimenubar h6 { 
    
        font-size:100%;
        font-weight:normal;    
        margin:0;
        border:solid 1px #c4c4be;
        color:#b9b9b9;    
    
    }
    
    div.yuimenubar h6 {
    
        float:left;
        display:inline; /* Prevent margin doubling in IE */
        padding:4px 12px;
        border-width:0 1px 0 0;
        
    }
    
    div.yuimenu h6 {
    
        float:none;
        display:block;
        border-width:1px 0 0 0;
        padding:5px 10px 0 10px;
    
    }
    
    
    /* Matches the UL inside a Menu or MenuBar instance */
    
    div.yuimenubar ul {
    
        list-style-type:none;
        margin:0;
        padding:0;
    
    }
    
    div.yuimenu ul {
    
        list-style-type:none;
        border:solid 1px #c4c4be;
        border-width:1px 0 0 0;
        margin:0;
        padding:10px 0;
    
    }
    
    
    div.yuimenu ul.first-of-type, 
    div.yuimenu ul.hastitle,
    div.yuimenu h6.first-of-type {
    
        border-width:0;
    
    }
    
    
    /* MenuItem and MenuBarItem styles */
    
    div.yuimenu li,
    div.yuimenubar li {
    
        font-size:85%;
        cursor:pointer;
        cursor:hand;
        white-space:nowrap;
        text-align:left;
    
    }
    
    div.yuimenu li.yuimenuitem {
    
        padding:2px 24px;
        
    }
    
    div.yuimenu li li,
    div.yuimenubar li li {
    
        font-size:100%;
    
    }
    
    
    /* Matches the help text for a menu item */
    
    div.yuimenu li em {
    
        font-style:normal;
        margin:0 0 0 40px;
    
    }
    
    div.yuimenu li a em {
    
        margin:0;
    
    }
    
    div.yuimenu li a,
    div.yuimenubar li a {
        
        /*
            "zoom:1" triggers "haslayout" in IE to ensure that the mouseover and 
            mouseout events bubble to the parent LI in IE.
        */
        zoom:1;
        color:#000;
        text-decoration:none;
        
    }
    
    div.yuimenu li.hassubmenu,
    div.yuimenu li.hashelptext {
    
        text-align:right;
    
    }
    
    div.yuimenu li.hassubmenu a.hassubmenu,
    div.yuimenu li.hashelptext a.hashelptext {
    
        float:left;
        display:inline; /* Prevent margin doubling in IE */
        text-align:left;
    
    }
    
    
    /* Matches focused and selected menu items */
    
    div.yuimenu li.selected,
    div.yuimenubar li.selected {
    
        background-color:#8c8ad0;
    
    }
    
    div.yuimenu li.selected a.selected,
    div.yuimenubar li.selected a.selected {
    
        text-decoration:underline;
    
    }
    
    div.yuimenu li.selected a.selected,
    div.yuimenu li.selected em.selected, 
    div.yuimenubar li.selected a.selected {
    
        color:#fff;
    
    }
    
    
    /* Matches disabled menu items */
    
    div.yuimenu li.disabled, 
    div.yuimenubar li.disabled {
    
        cursor:default;
    
    }
    
    div.yuimenu li.disabled a.disabled,
    div.yuimenu li.disabled em.disabled,
    div.yuimenubar li.disabled a.disabled {
    
        color:#b9b9b9;
        cursor:default;
        
    }
    
    div.yuimenubar li.yuimenubaritem {
    
        float:left;
        display:inline; /* Prevent margin doubling in IE */
        border-width:0 0 0 1px;
        border-style:solid;
        border-color:#c4c4be;
        padding:4px 24px;
        margin:0;
    
    }
    
    div.yuimenubar li.yuimenubaritem.first-of-type {
    
        border-width:0;
    
    }
    
    
    /* Matches the submenu indicator for menu items */
    
    div.yuimenubar li.yuimenubaritem img {
    
        height:8px;
        width:8px;
        margin:0 0 0 10px;
        vertical-align:middle;
    
    }
    
    div.yuimenu li.yuimenuitem img {
    
        height:8px;
        width:8px;
        margin:0 -16px 0 0;
        padding-left:10px;
        border:0;
    
    }
    
    div.yuimenu li.checked {
    
        position:relative;
    
    }
    
    div.yuimenu li.checked img.checked {
    
        height:8px;
        width:8px;
        margin:0;
        padding:0;
        border:0;
        position:absolute;
        left:6px;
        _left:-16px; /* Underscore hack b/c this is for IE 6 only */
        top:.5em;
        
    }
    Run the sample code and post your comments. I do have few questions/bugs from the above example.

    1. Context menu appears when I right click the menu node. But it appears even if i right click next to the menu item, ie, the div tag area which holds the menu item. I am not sure how to prevent this. I even noticed the same in yahoo examples.

    2. I have to find out a way to customize the context menu per menu item by adding removing the contextmenu items. I think it should be possible.
    I followed the alpha documentation for yui-ext 0.40 from

    http://www.yui-ext.com/deploy/yui-ext.0.40-alpha/docs/


    I forgot to mention that the latest yui-ext-0.40 has a bug in yui-ext.js. The bug is instead of "contextmenu" it has "contentmenu" in two places. Please change it before you run this code otherwise the contextmenu will not appear. (I think this is corrected in svn).


    Cee ya,
    Thameem[/b][/quote]

  2. #2
    Ext User
    Join Date
    Mar 2007
    Posts
    20
    Vote Rating
    0
    kyriakos is on a distinguished road

      0  

    Default


    thanks! this is exactly what i was looking for

  3. #3
    Ext User
    Join Date
    Mar 2007
    Posts
    20
    Vote Rating
    0
    kyriakos is on a distinguished road

      0  

    Default


    ok i've got a very strange problem with it. First of all if i used the code as was provided. The weird thing is that when i load the page in a new browser window (firefox 1.5) and right click on a menu option it does nothing (firebug doesnt show an error either). If I hit the browser refresh button and then right click it works. I couldnt get it to work at all in IE. I dont know if i'm doing something wrong here but has anyone else tested this?

    regarding..

    2. I have to find out a way to customize the context menu per menu item by adding removing the contextmenu items. I think it should be possible.

    Isnt it just a matter of using this keyword to identify which node got clicked?

  4. #4
    Ext User
    Join Date
    Mar 2007
    Posts
    65
    Vote Rating
    0
    thameema is on a distinguished road

      0  

    Default


    I do faced that problem. I am using my linux firefox 2.0 to develop the tree and it worked. But it didn't work in windows IE and Firefox. I am also trying to find out why its not working in windows. As per the code I am not doing anything special to display in linux firefox.

    I got the second part also working...will post the code once I get the windows thing figured out.

    Cee yaa.
    Thameem

  5. #5
    Ext User
    Join Date
    Mar 2007
    Posts
    20
    Vote Rating
    0
    kyriakos is on a distinguished road

      0  

    Default


    I swithced to normal Menu rather than Context menu and it works without the "refresh" issue but of course the menu appears at the bottom of the tree (instead of next to the treeitem) as described in this topic ( http://www.yui-ext.com/forum/viewtopic.php?t=2335 ). I'm trying to set the X / Y cfg property manually but doesnt seem to work at the moment - still working on it though.

  6. #6
    Ext User
    Join Date
    Mar 2007
    Posts
    20
    Vote Rating
    0
    kyriakos is on a distinguished road

      0  

    Default


    another question here is.. instead of using AssignConmenu to assign to each treenode why dont you just assign it to the contextmenu event of the tree itself and then use the node event parameter to differentiate between nodes?

    Code:
       function assignConmenu() {
          if(root.isLoaded()){
            var children = root.childNodes;
            //alert("test:"+children);
            
            for ( var i=0; i < children.length; i++ ) {
                  
             children[i].on("contextmenu", conMenu, children[i], true);         
             console.log("timesd:"+i);         
            }
           }
       };

  7. #7
    Ext User
    Join Date
    Mar 2007
    Posts
    20
    Vote Rating
    0
    kyriakos is on a distinguished road

      0  

    Default


    I found out why it doesnt work unless the page is reloaded. The assignConmenu is not being called unless I either open it in a fresh browser session or hit reload. Can't understand why but thats the problem with it. So i guess there must be something wrong with:
    YAHOO.ext.EventManager.on(window,"load",assignConmenu, assignConmenu, true);

  8. #8
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,483
    Vote Rating
    34
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    What do you mean? That code fragment is only supposed to call assignConmenu when the window loads, so it will only run when you open or reload that page.

  9. #9
    Ext User
    Join Date
    Mar 2007
    Posts
    20
    Vote Rating
    0
    kyriakos is on a distinguished road

      0  

    Default


    Exactly thats what it should do, but in my case it only loads when i reload the page - thats what I cannot understand.

  10. #10
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,483
    Vote Rating
    34
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    You mean on first page load, it's not firing, but it is when you press "reload"????

Similar Threads

  1. TreePanel with Context Menu
    By Thylia in forum Ext 2.x: Help & Discussion
    Replies: 18
    Last Post: 11 Jul 2007, 7:48 AM
  2. Grid context menu
    By mdelanno in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 5 Mar 2007, 9:39 AM
  3. treeview and context menu
    By kyriakos in forum Ext 1.x: Help & Discussion
    Replies: 4
    Last Post: 29 Jan 2007, 2:15 PM
  4. Grid with context menu
    By wolverine4277 in forum Ext 1.x: Help & Discussion
    Replies: 7
    Last Post: 12 Jan 2007, 6:55 AM
  5. need help with yui context menu
    By KuN in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 16 Nov 2006, 9:47 PM

Thread Participants: 4

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