extjs 动态添加删除panel

    技术2024-10-21  40

    在Ext.Viewport中动态添加删除panel (转载)

      (2009-11-12 11:00:21) 转载 标签: 

    杂谈

    分类: extjs

    在Ext.Viewport中动态添加删除panel

    今天一个朋友问,能不能在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的功能

    最新回复(0)