在Ext.Viewport中动态添加删除panel。
在Ext.Viewport中动态添加删除panel。
今天一个朋友问,能不能在Viewport中动态添加删除panel?
刚听到的时候,感觉挺容易的啊,于是乎,写了下来,在Ext.Viewport中动态添加/删除panel的方法.
viewport代码如下:
view sourceprint?
01.//—————————–布局操作begin——————————-
02. var viewport = new Ext.Viewport({
03. id:’viewport’,
04. layout:’border’,
05. items:[
06. new Ext.BoxComponent(
07. {
08. id:'north-panel',
09. region:'north',
10. el: 'north',
11. height:32
12. }),
13. {
14. id:'south-panel',
15. region:'south',
16. contentEl: 'south',
17. title:'下',
18. split:true,
19. height: 100,
20. minSize: 100,
21. maxSize: 200,
22. collapsible: true,
23. margins:'0 0 0 0',
24. collapsed: true
25. },
26. {
27. id:'east-panel',
28. region:'east',
29. title: '文件查询',
30. split:true,
31. width: 200,
32. minSize: 200,
33. maxSize: 200,
34. collapsible: true,
35. margins:'0 0 0 0',
36. contentEl: 'east',
37. collapsed: true
38. },
39. {
40. id:'west-panel',
41. region:'west',
42. title:'文件夹',
43. split:true,
44. width: 200,
45. minSize: 200,
46. maxSize: 200,
47. collapsible: true,
48. margins:'0 0 0 0',
49. layout:'fit',
50. items: treepanel
51. },
52. {
53. id:'center-panel',
54. region:'center',
55. title:'',
56. layout:'fit',
57. items:
58. [
59. gridpanel
60. ]
61. }
62. ]
63. });
64. //—————————–布局操作end———————————
现在要使用的是在center-panel中将gridpanel去掉,换成一个treepanel
于是乎,就写了如下代码:
var items=Ext.getCmp(‘center-panel’).items;
for(var i=0;i<items.length;i++){
Ext.getCmp(‘center-panel).remove(items[i]);
}
var treePanel=new Ext.tree.TreePanel({….})
(treepanel 的定义看在Ext Tree分类中~,链接:Ext-tree专题)
然后:
Ext.getCmp(‘center-panel’).add(treePanel).doLayout();
这样,就实现在了在Ext.Viewport中动态添加/删除panel的功能