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){//处理详细资料的显示元素,当这个