Extjs Preface 3

3.1. Really, I started learning ext for the sake of tree.

I have used xtree and the tree in Dojo before. It feels strange, the interface is simple, and the functions are not easy to use. The tree in ext is really bright, I have always thought that it is an impossible task to modify, delete, drag, and right-click a node, but it is easily implemented on ext, and the interface and animation effect are quite perfect. It's really amazing.

Tree structure is a typical data structure. The multi-level menu, Department organization structure, and provincial/municipal/County Level Three pyramid structure can all be represented in a tree structure, to show that a father has a group of children is really not tree-like. It is definitely a bright spot to complete this part.

3.2. The tradition is to make a tree first.

At the beginning of the tree-like world, everything was a treepanel.

var tree = new Ext.tree.TreePanel('tree');

The 'tree' parameter indicates the ID of the rendered Dom. HTML says a <Div id = "Tree"> </div> echo, and the tree appears at the position of the div.

Now we have obtained a tree panel. Since it is a tree, we must have a root. With the root, we can add branches to the top, put leaves, and finally decorate it like a tree. Well, the root is necessary. We will study how the root is grayed out.

VaR root = new Ext. Tree. treenode ({text: 'Even root '});

You can see it. It says it is the root, so it must be the root. Let's look at the following.

tree.setRootNode(root);tree.render();

First, we put the root Root in the tree and use the setrootnode () method to tell the tree that it is a root. You have to put it properly.

Render the tree immediately so that it appears in the place where id = "Tree". This ID is specified above. If you have any questions, go back and continue the study, we will not wait for you to continue.

Dangdang, I am very honored to announce to you that our first tree has come out. This is a photo of it.

Is this a tree?

Well, it's really not like a tree because it only has one root.

By the way, we want a tree, and you can come up with a root, which is useful for birds.

Well, in theory, when it sprout and grows into a tree, the possibility is relatively small. It is better for us to secretly insert several branches, maybe it looks more like a tree.

Note:

Although there is only one root, it is also a tree. The example of 1.x is in lingo-Sample/1.1.1/03-01.html.

3.3. surpass one root

The previous book said that we should secretly insert a few scorpions to make the tree more like a tree.

VaR root = new Ext. tree. treenode ({text: 'Even root'}); var node1 = new Ext. tree. treenode ({text: 'Even the first branch'}); var node2 = new Ext. tree. treenode ({text: 'is the first leaf of the first branch of the root'}); var node3 = new Ext. tree. treenode ({text: 'Even the first leaf of the root'}); node1.appendchild (node2); root. appendchild (node1); root. appendchild (node3 );

We pulled three treenode from the outside, and inserted node2 to node1, node1, and node2 to the root, regardless of the need. Now, our tree is like a tree.

Why? Why is it something like this? The guest is in a hurry. Wait for the second party to rectify the problem.

Well, it's a bit interesting now, but it's just a little stuck at the beginning, and it looks pretty uncomfortable. You can see the things below every time you get such a few points, is there a way to make it expand every time it is rendered?

Of course there are some methods, please eye-catching.

root.expand(true, true);

This solves your urgent needs. The first parameter is whether to recursively expand all subnodes. If it is false, only the first subnode is expanded, the child nodes are still folded ,. The second parameter indicates whether there is an animation effect. If it is true, you can see that the nodes are expanded a little bit. Otherwise, the nodes are flushed and flushed.

For convenience, our example can be expanded directly, saving your time. The example of 1.x is in lingo-Sample/1.1.1/03-02.html.

3.4. You don't think 2.0 is the same as 1.x, right?

The first difference is the definition of treepanel. The original ID should be put in {} and the corresponding name is El. Change it like this:

var tree = new Ext.tree.TreePanel({el:'tree'});

Even if this is done, nothing can be seen. What do we miss? I used findbug to check the Dom, and the height was 0. Of course I couldn't see anything. Why didn't the tree in 2.0 automatically scale? So we had to set an initial height for it, set a PX height in HTML to display it.

<div id="tree" style="height:300px;"></div>

The other is also the same. We can see the highlighted display when 2.0 is more than 1.x when the mouse moves over the tree node.

Well, I have read these examples and I should have some knowledge of the tree. Although only treenode can represent branches or leaves, the principle is very simple. If there are other nodes in this treenode, it is a branch. If it is not, it is a leaf. It is easy to see from the icon above it. Hey, the root is actually a branch without a higher-level node. In fact, they are all treenode, and their attributes are different.

In the lingo-Sample/2.0/directory, the examples are 03-01.html and 03-02.html.

3.5. This form of Tree node assembly is really big.

It is not only troublesome but also easy to make mistakes. Is there a simpler way? The answer is to use Ext. Tree. treeloader to exchange data with the background. We are only providing data so that treeloader can help us with data conversion and Assembly node operations.

La la, JSON and Ajax are coming soon, but do you still remember that once Ajax is involved, you need to cooperate with the server, and Ajax cannot directly retrieve data from the local file system.

First, let's add treeloader to treepanel.

var tree = new Ext.tree.TreePanel('tree', {loader: new Ext.tree.TreeLoader({dataUrl: '03-03.txt'})});

Here, the treeloader contains only one parameter dataurl: contents to see.

[{text:'not leaf'},{text:'is leaf',leaf:true}]

There is an array defined by two nodes. You may find that the extra attribute leaf: True has a magical effect, which we can see immediately.

The token reads data and is displayed on the page. You can only see the single root. This is because treenode does not support Ajax. We need to replace the root node with asynctreenode, which can fulfill our wishes.

VaR root = new Ext. Tree. asynctreenode ({text: 'Even root '});

It is estimated that anyone who sees this scene for the first time will be scared. Aren't we only defining two nodes? How come we ran so many things at once? Don't worry. Let's change root. Expand (True, true) to root. Expand () to avoid unlimited expansion of nodes, and then study this situation slowly.

The corresponding two nodes in the hosts file, but these two nodes are somewhat different. The not leaf node icon is a branch icon. If you click the plus sign in front of the node, then it becomes the scenario above. Why?

This is because asynctreenode inherits the dataurl in the root node treeloader. When you expand it, the expand () method of this node is executed, ajax will run to the address specified by dataurl to retrieve data. With firebug, you can see that the current node ID is passed as a parameter to the address specified by dataurl, in this way, the backend can calculate the returned data through the node ID, get the data treeloader to parse the data and assemble it into a subnode, and then display it.

Haha, now is the key part. Because the data provided by 03-03.txt used by the users does not determine the ID of the current node, the data returned each time is the same, which is why the tree will go through infinite loops.

So why does the first node have infinite loops? The second node does not have the small plus sign ~ Because the second node is not asynctreenode, The treeloader will judge the leaf attribute in the data when generating the node. If it is leaf: True, the treenode instead of asynctreenode will be generated, treenode does not automatically use Ajax values, and naturally does not expand infinitely.

In reality, it is nice to asynchronously read attribute nodes because you may need to save thousands of node records. If you load all data at a time, the reading and rendering speed will be very slow. In asynchronous reading mode, subnode attributes are obtained and rendered only when a node is clicked, which greatly improves the user experience. In addition, the tree structure of ext has a caching mechanism. Once opened, it will not be read repeatedly when clicked, improving the response speed.

For the HTML example, version 1.x is in lingo-Sample/1.1.1/03-03.html, and Version 2.0 is in lingo-Sample/2.0/03-03.html.

In order to consolidate the learning effect, let's write another example of JSON data acquisition. This time, JSON is a little more complicated.

The corresponding jsondata file is 03-04.txt.

[{text:'01',children:[{text:'01-01',leaf:true},{text:'01-02',children:[{text:'01-02-01',leaf:true},{text:'01-02-02',leaf:true}]},{text:'01-03',leaf:true}]},{text:'02',leaf:true}]

This can also be seen as a way to load all data at a time when there is not much data, as long as the leaf: True attribute is added to all leaf nodes, there will be no issue of loop expansion.

Example of HTML: 1. X in lingo-Sample/1.1.1/03-04.html, 2.0 in lingo-Sample/2.0/03-04.html.

3.6. the JSP Example must have 3.7. let you know what the tree can do 3.7.1. review tree events 3.7.2. the right-click menu is not a simple event 3.7.3. by default, the icons are monotonous. Change to 3.7.4. TIPS: 3.8. the gray shell is explicit! Let me modify the name of the Tree node directly! 3.9. Drag Me, drag me, and drag me. 3.10. Further, a complete tree operation is integrated.