在Ext.Viewport中动态添加删除panel (转载)
(2009-11-12 11:00:21)
今天一个朋友问,能不能在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的功能
|
|