gistfile1.js

		<script type="text/javascript">
			Ext.onReady(function(){
				var store = new Ext.data.SimpleStore({
					fields: ['name', 'id'],
					data : [<c:forEach var="row" items="${mapData}">['${row.name}', '${row.id}'],</c:forEach>]
				});
				siteSelection = new Ext.form.ComboBox({
					id : "selectedMap",
					name : "selectedMap",
					listeners : { 'select' : { fn : load }}, 
					store: store,
					displayField: 'name',
					valueField: 'id',
					mode: 'local',
					emptyText:'Select a site...',
					width:135
				});
				
				var generatePDF = new Ext.Action({
					handler: function(){
						
					},
					align: 'right',
					iconCls: 'pdf'
				});
				
				var navigate = new Ext.Button({
					id : 'select',
					toggleHandler: function (button, state) { if(state) { setControls('select'); } else { controls['select'].deactivate() } },
					toggleGroup : 'controls',
					iconCls: 'panButton'
				});
				
				var edit = new Ext.Button({
					id : 'modify',
					toggleHandler: function (button, state) { if(state) { setControls('modify'); } else { controls['modify'].deactivate() } },
					toggleGroup : 'controls',
					iconCls: 'editButton'
				});
				
				var barrierButton = new Ext.Button({
					id : 'barrier',
					toggleGroup : 'controls',
					iconCls: 'barrierButton',
					handler: function() {
						if(!this.pressed) { setControls('select'); } else { setControls('barriers'); }
					}
				});

				var item1 = new Ext.Panel({
					title: 'Accordion Item 1',
					layout: 'table',
					items: [barrierButton]
				});
			
				var item2 = new Ext.Panel({
					title: 'Accordion Item 2',
					html: '&lt;empty panel&gt;',
					cls:'empty'
				});
				
				var item3 = new Ext.Panel({
					title: 'Accordion Item 3',
					html: '&lt;empty panel&gt;',
					cls:'empty'
				});
				
				var item4 = new Ext.Panel({
					title: 'Accordion Item 4',
					html: '&lt;empty panel&gt;',
					cls:'empty'
				});
				
				var item5 = new Ext.Panel({
					title: 'Accordion Item 5',
					html: '&lt;empty panel&gt;',
					cls:'empty'
				});
				
				var accordion = new Ext.Panel({
					layout:'accordion',
					title: 'Edit',
					items: [item1, item2, item3, item4, item5]
				});
				
				var layers = new Ext.tree.TreePanel({
				    root: new Ext.tree.TreeNode({ text: 'root' }),
				    title: 'Layers'
				});
				
				var sidebarTabs = new Ext.TabPanel({
					id: 'sideBar',
					region: 'east',
					width: '230px',
					collapsible: true,
					activeTab: 0,
					resizeTabs: true,	
					plain: true,
					items:[layers , accordion]
				});
				
				var map = new Ext.Panel({
					id:'map',
					region:'center',
					tbar: [siteSelection, '->', navigate, edit, generatePDF]
				});
				
				var layout = new Ext.Panel({
					layout: 'border',
					height: 700,
					items: [sidebarTabs, map],
					renderTo: 'layout'
				});

			});
		</script>