extjs布局

以下引用自http://blog.csdn.net/nikyxxx/archive/2010/01/27/5261994.aspx感谢原作者

 

1. /*   
2.  * Ext JS Library 2.2   
3.  * Copyright(c) 2006-2008, Ext JS, LLC.   
4.  * licensing@extjs.com   
5.  *    
6.  * 翻译:廖瀚卿 yourgame@163.com   
7.  *    
8.  * http://extjs.com/license   
9.  */    
10.     
11. //     
12. // This is the main layout definition.     
13. // 这里是一个主要布局的定义.     
14. //     
15. Ext.onReady(function(){     
16.          
17.     Ext.QuickTips.init(); //初始提示tip     
18.          
19.     // This is an inner body element within the Details panel created to provide a "slide in" effect     
20.     // on the panel body without affecting the body's box itself.  This element is created on     
21.     // initial use and cached in this var for subsequent access.     
22.     // 这是一个位于详细资料面板的内部的主体元素 提供从面板外部滑入面板内部的效果,这个元素当初始化时被创建同时存储这个变量中用于缓存后来的     
23.     var detailEl;     
24.          
25.     // This is the main content center region that will contain each example layout panel.     
26.     // 这个一个主要包含每个示例布局的中间区域的面板     
27.     // It will be implemented as a CardLayout since it will contain multiple panels with     
28.     // only one being visible at any given time.     
29.     // 它应用于卡片布局后将包含多个面板,任何时候只有一个面板可以呈现.     
30.     var contentPanel = {     
31.         id: 'content-panel',     
32.         region: 'center', // this is what makes this panel into a region within the containing layout     
33.         layout: 'card',     
34.         margins: '2 5 5 0',     
35.         activeItem: 0,     
36.         border: false,     
37.         items: [     
38.             // 来自于 basic.js:     
39.             start, absolute, accordion, anchor, border, cardTabs, cardWizard, column, fit, form, table,     
40.             // 来自于 custom.js:     
41.             rowLayout, centerLayout,     
42.             // 来自于 combination.js: [combination:为组合的意思]     
43.             absoluteForm, tabsNestedLayouts     
44.         ]     
45.     };     
46.          
47.     // Go ahead and create the TreePanel now so that we can use it below     
48.     // 先创建一个书面板,以备我们接下来使用     
49.     var treePanel = new Ext.tree.TreePanel({     
50.         id: 'tree-panel',     
51.         title: 'Sample Layouts',     
52.         region:'north', //北边     
53.         split: true, //可以调节大小     
54.         height: 300, //默认高度为300px     
55.         minSize: 150, //最小高度为150px     
56.         autoScroll: true,//允许滚动条     
57.              
58.         // tree-specific configs:     
59.         // 树控件的特有的配置选项     
60.         rootVisible: false,//隐藏根结点     
61.         lines: false,     
62.         singleExpand: true,//同时只能打开一个树,当打开其中任何一个树时,将会关闭其他已经打开的树目录     
63.         useArrows: true,//树形目录使用visit中树目录显示效果(三角形代替+号)     
64.              
65.         loader: new Ext.tree.TreeLoader({     
66.             dataUrl:'tree-data.json'//树目录数据加载为本地json数据文件     
67.         }),     
68.              
69.         root: new Ext.tree.AsyncTreeNode()     
70.     });     
71.          
72.     // Assign the changeLayout function to be called on tree node click.     
73.     // 指定一个当树节点被单击后更改布局的函数.     
74.     treePanel.on('click', function(n){  //n为节点对象     
75.         var sn = this.selModel.selNode || {}; // selNode is null on initial selection 如果树的选择模型为空则初始化它     
76.         if(n.leaf && n.id != sn.id){  // ignore clicks on folders and currently selected node      
77.                                       // 忽略文件夹的单击以及当前已经选择节点的多次单击操作     
78.             Ext.getCmp('content-panel').layout.setActiveItem(n.id + '-panel');     
79.             //获得内容面板.设置当前获得的面板项为(json数据中的id名字(如:"id:'absolute'")加上 '-panel' 组成 'absolute-panel'     
80.             //这样来使面板处于活动状态(即显示)     
81.             if(!detailEl){//处理详细资料的显示元素,当这个