Treepanel controls and TabPanel controls in ext

In the actual project, the left tree menu, provides a variety of features Click, the right side of the panel, along with the selection of the left node performance different features content, this is a fairly classic layout, in the ext frame, there are two controls Treepanel and TabPanel just complete these functions, This article is a simple introduction to the use of these two controls and the way to click on the left tree node to change the right content. First look at the following specific code.

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">  

The above code, built two controls Menutree and Contentpanel,menutree to display the specific function menu, Contentpanel to show the specific function content, Menuttree node is through the AppendChild () Method manually added to the, and in order to facilitate the introduction, each node has a function to deal with the Click event, in the specific application, you can also use Asynctreenode () and treeloader () dynamic loading nodes, the following emphasis on the click Tree node caused by the changes in the functional area of the method, There are three methods used in the code above.


(1) The HTML properties of the TabPanel control are mated <iframe> implemented. The method is to use the HTML attribute contains <iframe> syntax to invoke another page, see Code. the implementation of this method is relatively simple, as long as the re-editing of an HTML file can be, and if you want to use the newly generated page of the Ext control is relatively simple, but also better control, as long as the use of a page as a result, because he is a complete HTML file. And the disadvantage of this method is that the resource occupies the most powerful, is the three methods of the most severe, but also has the problem of ext re-loading (do not know the EXT library to consider this situation has not), the other is the new page loading speed is the slowest. 


(2) implemented by the AutoLoad property of the TabPanel control. The method is to take advantage of the AutoLoad property, which has a number of parameters, of which two is more important, the URL represents the file to be loaded, scripts indicates whether the loaded file contains a script, this property is very important, if you want to create an ext control in a new page, you must specify this parameter. the implementation of this method is more complex than the previous one, because the introduced file is not a complete HTML file, it may be only part of the content, but the resource consumption is less, and load faster (it has a loading instructions), but the disadvantage is that if it is loaded with a simple HTML file (*.html), In the character encoding processing is very troublesome, often garbled, I provide the source code is a php file, with PHP file is just a function, change the output character encoding, with HTML can achieve the same function, but it will be garbled, I do not know how to solve the problem. 


(3) By building a new panel for yourself. The method is to add the panel to TabPanel by inheriting the panel panel, then adding the content to be displayed, and then reloading the Initcomponet () method, and in the method one should note that the newly generated page layout must use Fit, Otherwise, the contents of the panel cannot be displayed. This method is the most complex of all methods, and because of the fit layout, the elements in the newly generated page are not well controlled, and the forms in my example are quite chaotic. But the load speed is the fastest, probably less loading instructions, resource consumption is the same as the second method. 


Of the three methods above, I prefer the second implementation aspect, simple control, and a loading instruction. I wonder if you have any other way. Discuss the discussion together.