Results 1 to 10 of 10

Thread: beforeremove treepanel

  1. #1
    Ext User
    Join Date
    Mar 2007
    Posts
    3
    Vote Rating
    0
      0  

    Default beforeremove treepanel

    The beforeremove event doesn't cancel the remove when false is returned.

  2. #2
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    New York, NY
    Posts
    6,956
    Vote Rating
    20
      0  

    Default

    You need to provide more details. It works fine for me.

  3. #3
    Ext User
    Join Date
    Mar 2007
    Posts
    3
    Vote Rating
    0
      0  

    Default

    Maybe I'm not doing it right

    I have two tree
    and I'm trying to copy a node from one tree to the other without removing it fro the original.

    It moves from one tree to the other correctly but the beforeremove on the origin tree is not working the way I would expect Here are the scripts for the trees

    Code:
    var CopyFromTree = function(){
        // shorthand
        var Tree = Ext.tree;
        
        return {
        	tree: null,
        	tree2: null,
            init : function(){
                // yui-ext tree
                var tree = new Tree.TreePanel('copyTree', {
                    animate:true, 
                    loader: new Ext.tree.TreeLoader({
                        dataUrl:'treeAdmin.jsp',
                        baseParams: {lib:'From'} // custom http params
                    }),
                    enableDD:true,
                    containerScroll: true,
                    rootVisible: false,
                    dropConfig: {appendOnly:false}
                });
                
                this.tree = tree;
                // set the root node
                var root = new Tree.AsyncTreeNode({
                    text: 'Applications', 
                    draggable:false, // disable root node dragging
                    id:'allApplications'
                });
                tree.setRootNode(root);
                
                // render the tree
                tree.render();
                
                tree.on('beforeremove', this.beforeRemove, this );            
                tree.on('beforemove', this.beforeMove, this);
                tree.on('startdrag', this.startDrag, this);
                tree.on('enddrag', this.endDrag, this);            
                
                root.expand(false, /*no anim*/ false);
            }, 
    		beforeRemove : function(tree, node, childNode ){
    			return false;			
            },                 
            beforeMove : function(tree, node, oldParent, newParent, index ){
            	;
            },
            startDrag : function (panel, node, e){
            	var root = ApplicationTree.tree.getRootNode();
            	if(node.id.indexOf("question:") != -1){
            		root.allowChildren  = false;       
            	} else if(node.id.indexOf("page:") != -1) {
            		for(var i =0; i < root.childNodes.length; i++)
            			root.childNodes[i].allowChildren = false;
            	}   	
            },
            endDrag : function (panel, node, e){
            	var root = ApplicationTree.tree.getRootNode();
            	if(node.id.indexOf("question:") != -1) {
            		root.allowChildren  = true;
            	} else if(node.id.indexOf("page:") != -1) {
            		for(var i =0; i < root.childNodes.length; i++)
            			root.childNodes[i].allowChildren = true;
            	}        	
            }
        };
    }();
    
    Ext.EventManager.onDocumentReady(CopyFromTree.init, CopyFromTree, true);
    
    
    var ApplicationTree = function(){
        // shorthand
        var Tree = Ext.tree;
        var applicationContextMenu = new Ext.menu.Menu({
        	id: 'applicationContextMenu',
        	items: [
        		{text: 'New Page',handler: menuNewPage_onClick},
    	   		{text: 'Copy Page',handler: menuCopyPage_onClick}
        	]
    	});     
        var pageContextMenu = new Ext.menu.Menu({
        	id: 'pageContextMenu',
        	items: [
        		{text: 'New Question',handler: menuNewQuestion_onClick},
        		{text: 'Copy Question',handler: menuCopyQuestion_onClick},    		
                {text: 'Delete', handler: menuDeletePage_onClick}
        	]
    	}); 
        var questionContextMenu = new Ext.menu.Menu({
        	id: 'questionContextMenu',
        	items: [
        		{
                    text: 'New',
                    menu: {
                    	items: [
                    		{text: 'Answer', handler: menuNewQuestionAnswer_onClick},
                    		{text: 'Rule', handler: menuNewQuestionRule_onClick}                		
                    	]
                    }
                },
                {text: 'Delete', handler: menuDeleteQuestion_onClick}
        	]
    	}); 	
    
    	var triggeringNode = null;
    
        function menuNewPage_onClick(item) {
        	triggeringNode.id
        	Ext.get('general').dom.src = 'pageAdmin.jsp?APP_ID='+ triggeringNode.id.replace('app:','');
        }
    
        function menuCopyPage_onClick(item) {
        	alert(item.text);
        }        
            
        function menuNewQuestion_onClick(item) {
        	alert(item.text);
        }
        
        function menuCopyQuestion_onClick(item) {
        	alert(item.text);
        }    
        
        function menuNewQuestionAnswer_onClick(item) {
        	alert(item.text);
        }
        
        function menuNewQuestionRule_onClick(item) {
        	alert(item.text);
        }
        
        function menuDeletePage_onClick(item) {
        	alert(item.text);
        }
        
        function menuDeleteQuestion_onClick(item) {
        	alert(item.text);
        }
        
        return {
        	tree: null,
            init : function(){
                // yui-ext tree
                var tree = new Tree.TreePanel('tree', {
                    animate:true, 
                    loader: new Ext.tree.TreeLoader({
                        dataUrl:'treeAdmin.jsp',
                        baseParams: {lib:'workingApp'} // custom http params
                    }),
                    enableDD:true,
                    containerScroll: true,
                    rootVisible: true,
                    dropConfig: {appendOnly:false}
                });
                
                this.tree = tree;
                // set the root node
                var root = new Tree.AsyncTreeNode({
                    text: appName, 
                    draggable:false, 
                    id:'app:'+appId
                });
                
                tree.setRootNode(root);
    
                // render the tree
                tree.render();
                
                tree.on('contextmenu', this.menuShow, this); 
                
                tree.on('move', this.onMove, this);
                tree.on('startdrag', this.startDrag, this);
                tree.on('enddrag', this.endDrag, this);
                
                tree.on('beforeclick', function(node){
                	  var el = Ext.get('general').dom;
    	        	  if(node.id.indexOf('page:') != -1){
    			          el.src = 'pageAdmin.jsp?PAGE_ID='+node.id.replace('page:','');
    			      } else if(node.id.indexOf('question:') != -1){
    					  el.src = 'questionAdmin.jsp?QUESTION_ID='+node.id.replace('question:','');
    				  } else if(node.id.indexOf('app:') != -1){
    			          el.src = 'applicationAdmin.jsp?APP_ID='+node.id.replace('app:','');
    			      } 
                });            
                
                root.expand(false, /*no anim*/ false);
            },        
            menuShow : function( node ){       
    	          triggeringNode = node;
            	  if(node.id.indexOf('page:') != -1)
    		          pageContextMenu.show(node.ui.getAnchor());
            	  else if(node.id.indexOf('question:') != -1)
    		          questionContextMenu.show(node.ui.getAnchor());	
            	  else
    		          applicationContextMenu.show(node.ui.getAnchor());		          	          
            },               
            onMove : function(tree, node, oldParent, newParent, index ){
            	var oldID = oldParent.id.split(":")[1];
            	
    			TreeAdmin.doUpdate(newParent.id.split(":")[1],((oldID == null)? -1 : oldID),node.id.split(":")[1],node.id.split(":")[0],index, null);
            },
            startDrag : function (panel, node, e){
            	var root = panel.getRootNode();
            	if(node.id.indexOf("question:") != -1){
            		root.allowChildren  = false;       
            	} else if(node.id.indexOf("page:") != -1) {
            		for(var i =0; i < root.childNodes.length; i++)
            			root.childNodes[i].allowChildren = false;
            	}   	
            },
            endDrag : function (panel, node, e){
            	var root = panel.getRootNode();
            	if(node.id.indexOf("question:") != -1) {
            		root.allowChildren  = true;
            	} else if(node.id.indexOf("page:") != -1) {
            		for(var i =0; i < root.childNodes.length; i++)
            			root.childNodes[i].allowChildren = true;
            	}        	
            }
        };
    }();
    
    Ext.EventManager.onDocumentReady(ApplicationTree.init, ApplicationTree, true);

    In the CopyfromTree the beforeremove event fires but still removes the item even though I have beforeremove returning false.

  4. #4
    Ext User
    Join Date
    Apr 2007
    Posts
    37
    Vote Rating
    0
      0  

    Default Same Issue - returning false does not stop the close

    I am having the same problem here... Has anyone come up with a reason why this doesn't work? Here is how I'm implementing this:

    this.panel.region.addListener(
    'beforeremove'
    , function() {
    var composeConfirm = confirm("Closing this window will delete all entered information.\n\nAre you sure you want to close this window?");

    if (!composeConfirm) {
    return false;
    }
    }, this
    , true
    );

    Is there something obvious that I'm not seeing here?

    Thanks!

  5. #5
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    New York, NY
    Posts
    6,956
    Vote Rating
    20
      0  

    Default

    For the Tree:

    That's a move (2 part action) - not just a remove. You are in fact stopping the remove, but you are not stopping the add/insert. I'm not sure what the results are in this case, probably not what you are trying to do.

    For the ContentPanel/Region:

    Code:
    /**
             * @event beforeremove
             * Fires before a panel is removed (or closed). To cancel the removal 
             * set "e.cancel = true" on the event argument.
             * @param {Ext.LayoutRegion} this
             * @param {Ext.ContentPanel} panel The panel
             * @param {Object} e The cancel event object
             */
    Jack Slocum
    Sencha Co-Founder, Ext JS Founder
    Original author of Ext JS 1, 2 & 3.
    Twitter: @jackslocum

  6. #6
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854
    Vote Rating
    1
      0  

    Default

    Check the doc for region's beforeremove event. You need to set e.cancel=true, rather than returning false from your handler.

  7. #7
    Ext User
    Join Date
    Mar 2007
    Posts
    3
    Vote Rating
    0
      0  

    Smile Ok I have already solved this issue.

    Since had not heard back on this for a while I went ahead and fixed this myself. Below is what needs to be fixed to rectify this issue.

    The problem is that when the move happens there is no clone of the object made since no clone is made the details of the original all change such as the parent tree and so on. This is the cause of the node disappearing. Inorder to fix this you need to create the cloneing ability for the nodes. Not all the settings need to be cloned but a good chunk of them do. You will also need set up clone functions on the properties that are objects. Such as the UI object and any and all events. You then need to set all things that refrence the old tree in the clone to the new tree.

    I hope this helps.

    Bob

  8. #8
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    New York, NY
    Posts
    6,956
    Vote Rating
    20
      0  

    Default

    To clone a node you should be able to do:

    new Ext.tree.TreeNode(existingNode.attributes);

    This doesn't clone children, but that could be done fairly easily using cascade().

    Edit: you will need to edit the ID if it is going in the same tree.
    Jack Slocum
    Sencha Co-Founder, Ext JS Founder
    Original author of Ext JS 1, 2 & 3.
    Twitter: @jackslocum

  9. #9
    Ext User
    Join Date
    Mar 2007
    Posts
    3
    Vote Rating
    0
      0  

    Default

    I am still having problems with implementation of this. Any chance we could get a simple example or some code snippets to illustrate this functionality? Specifically:

    a) Two trees, with drag-n-drop between them
    b) Drag from one tree to another simply clones the node and appends to the new tree, leaving the original node intact.

    Thanks much!
    Tristan

  10. #10
    Ext User
    Join Date
    Mar 2007
    Posts
    9
    Vote Rating
    0
      0  

    Default

    Hello,

    I'm having a similar Problem here:

    I've got a Tree, which loads its nodes via XHR. When a User wants to delete a node, I firstly want to try to delete it serverside and if success, delete it in the GUI:

    ButtonHandler:
    [code]
    handler: function() {
    var n = JL.Module.Mam.getLabelTree().getSelectionModel().getSelectedNode();
    if(! n || n.id == JL.Module.Mam.LABEL_TREE_ROOT_ID)
    {
    Ext.MessageBox.alert('Kein Label gew

Similar Threads

  1. treepanel of yui-ext 0.40
    By humpdi in forum Ext 1.x: Help & Discussion
    Replies: 7
    Last Post: 20 Feb 2007, 2:51 PM
  2. TreePanel
    By dolittle in forum Ext 1.x: Help & Discussion
    Replies: 5
    Last Post: 20 Feb 2007, 2:12 PM
  3. Bug in new TreePanel
    By manugoel2003 in forum Ext 1.x: Bugs
    Replies: 2
    Last Post: 24 Jan 2007, 11:43 PM
  4. TreePanel
    By seldon in forum Ext 1.x: Help & Discussion
    Replies: 3
    Last Post: 12 Jan 2007, 1:40 PM
  5. new TreePanel
    By alex1er in forum Community Discussion
    Replies: 2
    Last Post: 8 Jan 2007, 10:31 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •