PDA

View Full Version : How to Create dynamic columns which get triggered by an event.



akhildmx
24 Feb 2011, 10:25 AM
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 B1

Item 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>