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