У меня есть видовой экран, а в центральном регионе у меня есть вкладка. Каждая вкладка содержит столбцы, и у каждого столбца есть панель с 3-4 элементами.Что-то вроде ...
Колонка A (неделя 1) Колонка B (неделя 2)
Элемент A1 Элемент B1
Элемент A2 Элемент B2
Iхочу, чтобы эти столбцы были динамическими.Если столбцы были неделей календаря, то после изменения месяца столбцы также меняются. У меня также есть небольшой календарь в восточной области этого видового экрана, и я планирую инициировать изменение столбцов с помощью этого календаря.
Вот код ...
<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>