extjs - Ext - Dynamic Columns triggered by an event -
i have viewport , in center region have tabpanel.each tabpanel contain columns, , each column has panel 3-4 items. like...
column a(week 1) column b(week 2)
item a1 item b1
item a2 item b2
i want these columns dynamic. if columns week of calendar once month changes,the columns change.i have small calendar in east region of viewport , planning trigger column change using calendar.
here 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 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 ext.tabpanel, use add() , remove() methods add or remove ext.panels, represent tabs.
if clearing tabs, use removeall(). pseudo-code:
onchangemonth: function() { // ... tabpanel.removeall(); foreach (weekpanels) { tabpanel.add(weekpanel); } }
Comments
Post a Comment