extjs 动态添加删除panel

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

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

杂谈

分类: extjs

今天一个朋友问,能不能在Viewport中动态添加删除panel?

刚听到的时候,感觉挺容易的啊,于是乎,写了下来,在Ext.Viewport中动态添加/删除panel的方法.

viewport代码如下:

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的功能

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值