我有一个视口，在中心区域我有一个tabpanel.Each tabpanel包含列，每列都有3-4个项目的面板。有点像...
A栏（第1周）B栏（第2周）
项目A1项目B1
项目A2项目B2
我希望这些列是动态的。如果列是一周的日历，那么一旦月份更改，列也会更改。我在此视口的东部区域也有一个小日历，我计划使用该日历触发列更改。
这是代码......
<title>Test</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<!-- Tabs Example Files -->
<link rel="stylesheet" type="text/css" href="tabs-example.css" />
<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../shared/examples.css" />
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>
<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../adapter/ext/ext-all-debug.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="../../ext_main.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
Ext.QuickTips.init();
var store = new Ext.data.Store({
data: [ ],
reader: new Ext.data.ArrayReader({id:'id'}, [
'id',
'St',
'GD',
'DC',
'T',
{name: 'DP', type: 'date', dateFormat: 'Y-m-d'}
])
});
var viewport = new Ext.Viewport({
layout: 'border',
renderTo: Ext.getBody(),
items: [{
region: 'north',
title: '',
height: 24,
xtype: 'toolbar',
items: [{
xtype: 'tbspacer'
},{
xtype: 'tbbutton',
text: '',
handler: function(btn){
btn.disable();
}
},{
xtype: 'tbfill'
},
{
xtype: 'button',
text: '<b></b>',
menu: [
]}
]
},{
region: 'west',
xtype: 'panel',
title: 'Calendar',
collapsible: true,
split: true,
width: 280,
html:'<object data=http://localhost:8084/TM/extjs/examples/layout/test.html width="400" height="220"> \n\
<embed src=http://localhost:8084/TM/extjs/examples/layout/test.html width="400" height="220"> </embed></object>'
},{
region: 'center',
split:true,
xtype: 'tabpanel',
activeTab: 0,
items: [
{
title: ' ',
layout:'column',
autoScroll:true,
items:[{
columnWidth:.13,
title: '2/21',
xtype: 'panel',
collapsible: true,
items: [{
title: '',
height: 100,
dataIndex: '',
rowspan:1,
width:200},
{
title: '',
height: 100,
rowspan:1,
width:200
},{
title: '',
height: 100,
rowspan: 1,
width:200
},{
title: '',
height: 100,
rowspan: 1,
width:200
}
]}
]
},{
columnWidth:.13,
title: '3/14',
xtype: 'panel',
collapsible: true,
items: [{
title: '',
height: 100,
rowspan:1,
width:200},
{
title: '',
height: 100,
rowspan:1,
width:200
},{
title: '',
height: 100,
rowspan: 1,
width:200
},{
title: '',
height: 100,
rowspan: 1,
width:200
}
]
}
]
}
] },
{ title: '',
layout:'column',
autoScroll:true,
items:[{
columnWidth:.13,
title: '2/21',
xtype: 'panel',
collapsible: true,
items: [{
title: '',
height: 100,
rowspan:1,
width:200},
{
title: '',
height: 100,
rowspan:1,
width:200
},{
title: '',
height: 100,
rowspan: 1,
width:200
},{
title: '',
height: 100,
rowspan: 1,
width:200
},{
title: '',
height: 100,
rowspan: 1,
width:200
},{
title: '',
height: 100,
rowspan: 1,
width:200
},{
title: '',
height: 100,
rowspan: 1,
width:200
}
]
}
]
}
,{
title: '3/07',
columnWidth:.13,
collapsible: true,
items: [{
title: '',
height: 100,
rowspan:1,
width:200},
{
title: '',
height: 100,
rowspan:1,
width:200
},{
title: '',
height: 100,
rowspan: 1,
width:200
},{
title: '',
height: 100,
rowspan: 1,
width:200
},{
title: '',
height: 100,
rowspan: 1,
width:200
},{
title: '',
height: 100,
rowspan: 1,
width:200
},{
title: '',
height: 100,
rowspan: 1,
width:200
}
]
},{
title: '3/14',
columnWidth:.13,
collapsible: true,
items: [{
title: '',
height: 100,
rowspan:1,
width:200},
{
title: '',
height: 100,
rowspan:1,
width:200
},{
title: '',
height: 100,
rowspan: 1,
width:200
},{
title: '',
height: 100,
rowspan: 1,
width:200
},{
title: '',
height: 100,
rowspan: 1,
width:200
},{
title: '',
height: 100,
rowspan: 1,
width:200
},{
title: '',
height: 100,
rowspan: 1,
width:200
}
]
},
{ title: '',
layout:'column',
autoScroll:true,
items:[{
columnWidth:.13,
title: '2/21',
xtype: 'panel',
collapsible: true,
items: [{
title: '',
height: 100,
rowspan:1,
width:200},
{
title: ' ',
height: 100,
rowspan:1,
width:200
},{
title: '',
height: 100,
rowspan: 1,
width:200
},{
title: '',
height: 100,
rowspan: 1,
width:200
},{
title: '',
height: 100,
rowspan: 1,
width:200
}
]},{
columnWidth:.13,
title: '2/28',
xtype: 'panel',
collapsible: true,
items: [{
title: '',
height: 100,
rowspan:1,
width:200},
{
title: ' ',
height: 100,
rowspan:1,
width:200
},{
title: '',
height: 100,
rowspan: 1,
width:200
},{
title: '',
height: 100,
rowspan: 1,
width:200
},{
title: '',
height: 100,
rowspan: 1,
width:200
}
]
}
]},
{
region: 'east'
},
{
region:'south',
height: 200
});
</script>
答案 0 :(得分：0)
在Ext.TabPanel上，使用add()和remove()方法添加或删除Ext.Panel，代表您的标签。
如果要清除所有标签，请使用removeAll()。伪代码：
onChangeMonth: function() {
// ...
tabpanel.removeAll();
foreach (weekPanels) {
tabpanel.add(weekPanel);
}
}