今天一个朋友问,能不能在Viewport中动态添加删除panel?
刚听到的时候,感觉挺容易的啊,于是乎,写了下来,在Ext.Viewport中动态添加/删除panel的方法.
viewport代码如下:
view source print ? 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的功能