Application of sequence traversal in ExtJs TreePanel

The principle is very simple, that is, the sequence traversal of the tree. When the first leaf node is encountered during the traversal process, the work is completed.

The effect is as follows:

The Code is as follows:

Copy codeCode: var currentRootNode = null; // the currently selected Root Node
Function NodeClass ()
{// Define a node class
Var nodeValue = null;
Var nextNode = null; // The next node
}
Function InitQueue (queue)
{// Initialize a queue
Queue = new NodeClass (); // the header node is empty.
Return queue;
}
Function Empty (queue)
{// Determines whether a queue is empty.
Var returnValue = false;
If (queue. nextNode = null)
{
ReturnValue = true;
}
Return returnValue;
}
Function EnQueue (queue, x)
{// Queue operations
Var returnValue = queue;
Var currentNode = queue; // header Node
While (currentNode. nextNode! = Null)
{// Current until it comes to the last element
CurrentNode = currentNode. nextNode ;//
}
Var tempNode = new NodeClass (); // generate a new element with the value of X
TempNode. nodeValue = x;
CurrentNode. nextNode = tempNode; // insert to the end
Return returnValue;
}
Function DeQueue (queue)
{// Team-out operations
Var returnValue = null;
If (queue. nextNode! = Null)
{// If the queue is not empty
If (queue. nextNode. nextNode = null)
{// If it is the last element (even if the team head is the team end, there is only one element)
ReturnValue = queue. nextNode. nodeValue; // obtain the value of this element.
Queue. nextNode = null; // set the nextNode of the queue of the header pointer to NULL
}
Else
{
ReturnValue = queue. nextNode. nodeValue; // obtain the value of this element.
Queue. nextNode = queue. nextNode. nextNode; // assign the pointer of the second element to the nextNode of the queue, which is equivalent to deleting the first element.
}
}
Return returnValue; // return the value of the first deleted element.
}
Function GetHead (queue)
{// Obtain the value of the Header element
Return queue. nextNode. nodeValue;
}
Function Clear (queue)
{// Clear a queue
Queue. nextNode = null;
Queue. nodeValue = null;
}
Function Current_Size (queue)
{// Obtain the size of the current queue
Var returnValue = 0;
Var currentNode = queue. nextNode; // header Node
While (currentNode! = Null)
{// Calculate from beginning to end
ReturnValue ++;
CurrentNode = currentNode. nextNode; // point to the next element
}
Return returnValue; // return size
}
Function findFirstCheafNode ()
{
Var childNodes = null;
Var targetNode = null; // target leaf node to be searched
Var queue = null; // auxiliary queue
Queue = InitQueue (queue); // initialize the queue
Queue = EnQueue (queue, currentRootNode); // enter the queue as the root node.
While (! Empty (queue ))
{// As long as the queue is not empty
Node = DeQueue (queue); // output queue
If (node. hasChildNodes ())
{// Non-leaf node
ChildNodes = node. childNodes;
// The child nodes are in the queue from left to right.
For (var I = 0, len = childNodes. length; I <len; ++ I)
{
Queue = EnQueue (queue, childNodes [I]);
}
}
Else
{// Locate the first leaf node
Return node;
}
}
}
Ext. onReady (function ()
{
Var tree = new Ext. tree. TreePanel ({
El: 'treediv ',
UseArrows: true,
AutoScroll: true,
Animate: true,
EnableDD: true,
ContainerScroll: true,
Border: false,
// Auto create TreeLoader
Loader: new Ext. tree. TreeLoader ({dataUrl: 'Level1.txt '})
});
Var rootID = '0 ';
Var rootnode = new Ext. tree. AsyncTreeNode ({
Id: rootID,
Text: 'railways ',
Draggable: false, // The root node cannot be dragged.
Expanded: false
});
// Set the root node for the tree
Tree. setRootNode (rootnode );
Tree. render ();
Tree. on ('click', function (node, event)
{// Query the first leaf node of the tree
CurrentRootNode = node;
Var targetNode = findFirstCheafNode ();
Ext. MessageBox. alert ("info", "the current root node is:" + currentRootNode. text + "the first leaf node below it is:" + targetNode. text );
});
}); Var childNodes = null;
Var targetNode = null; // target leaf node to be searched
Var queue = null; // auxiliary queue
Queue = InitQueue (queue); // initialize the queue
Queue = EnQueue (queue, currentRootNode); // enter the queue as the root node.
While (! Empty (queue ))
{// As long as the queue is not empty
Node = DeQueue (queue); // output queue
If (node. hasChildNodes ())
{// Non-leaf node
ChildNodes = node. childNodes;
// The child nodes are in the queue from left to right.
For (var I = 0, len = childNodes. length; I <len; ++ I)
{
Queue = EnQueue (queue, childNodes [I]);
}
}
Else
{// Locate the first leaf node
Return node;
}
}
}
Ext. onReady (function ()
{
Var tree = new Ext. tree. TreePanel ({
El: 'treediv ',
UseArrows: true,
AutoScroll: true,
Animate: true,
EnableDD: true,
ContainerScroll: true,
Border: false,
// Auto create TreeLoader
Loader: new Ext. tree. TreeLoader ({dataUrl: 'Level1.txt '})
});
Var rootID = '0 ';
Var rootnode = new Ext. tree. AsyncTreeNode ({
Id: rootID,
Text: 'railways ',
Draggable: false, // The root node cannot be dragged.
Expanded: false
});
// Set the root node for the tree
Tree. setRootNode (rootnode );
Tree. render ();
Tree. on ('click', function (node, event)
{// Query the first leaf node of the tree
CurrentRootNode = node;
Var targetNode = findFirstCheafNode ();
Alert ("the current root node is:" + currentRootNode. text + "the first leaf node below it is:" + targetNode. text );
});
});