Ext - Dynamic Columns triggered by an event
I have a Viewport and in Center region I have a tabpanel.Each tabpanel contain columns, and each column has panel with 3-4 items. Something like...
Column A(Week 1) Column B(Week 2)
Item A1 Item B1Item A2 item B2
I want these columns to be dynamic. If columns were a week of calendar then once the month changes,the columns also change.I also have a small calendar in the east region of this viewport and I am planning to trigger the column change using that calendar.
Here is the code...
<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>
On your Ext.TabPanel, use the add() and remove() methods to add or remove Ext.Panels, which represent your tabs.
If you are clearing all tabs, use removeAll(). Pseudo-code:
onChangeMonth: function() {
// ...
tabpanel.removeAll();
foreach (weekPanels) {
tabpanel.add(weekPanel);
}
}
加载中,请稍侯......
精彩评论