<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
<meta name="Generator" content="Microsoft Exchange Server">
<!-- converted from rtf -->
<style><!-- .EmailQuote { margin-left: 1pt; padding-left: 4pt; border-left: #800000 2px solid; } --></style>
</head>
<body>
<font face="Arial, sans-serif" size="2">
<div>My below code was previously an Ext.Window which works it basically pops up and allows me to select from the simplestore which contains one address. When I click the address it automatically changes the map extent and zooms into the address no problem.
However I am trying to accomplish the same thing using a tab panel/ext window so that I can show multiple tabs but each one will behave the same way as my original setup which allows me to display the store and select a value from the drop down. Just wondering
if this is possible I have tried to apply the attributes related to the simplestore etc to my tabs but I just can't quite get it. Below is my original code first with the simplestore setup and then the tab setup which I want to use. Hope this makes sense thanks
for the assistance!</div>
<div> </div>
<div> </div>
<div> </div>
<div>----------Original SimpleStore/Ext Window that is working and zooms into the proper mapextent when it is clicked</div>
<div> </div>
<div> // Create the neccassary info for the zoom to county drop down box. </div>
<div> var store = new Ext.data.SimpleStore({ </div>
<div> fields: ['value', 'text', 'bbox'], </div>
<div> data : [ </div>
<div> ['43R', '43 Reichley Street', new </div>
<div> OpenLayers.Bounds(-113.747591795464,52.2719118391991,-113.747021258667,52.2721269982475).transform(new </div>
<div> OpenLayers.Projection("EPSG:4326"), new </div>
<div> OpenLayers.Projection("EPSG:900913"))]] </div>
<div> }); </div>
<div> </div>
<div> </div>
<div>// EXT Window for Address Search</div>
<div> var window = new Ext.Window({</div>
<div> title: 'Zoom to Address',</div>
<div> width: 200,</div>
<div> height: 100,</div>
<div> minWidth: 200,</div>
<div> minHeight: 100,</div>
<div> renderTo: 'tab_Address',</div>
<div> closable: true,</div>
<div> layout: 'fit',</div>
<div> plain: true,</div>
<div> bodyStyle: 'padding: 5px;',</div>
<div> items: [{</div>
<div> xtype: 'shortcuts',</div>
<div> map: map,</div>
<div> store: store,</div>
<div> templates: {</div>
<div> header: new Ext.Template("Choose an Address"),</div>
<div> footer: new Ext.Template("The map will automatically center to this location")</div>
<div> }</div>
<div> }]</div>
<div> });</div>
<div> </div>
<div> window.setPagePosition(300, 50);</div>
<div> window.show()</div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div>My new setup with tabs that I am trying to get to perform the same action --------</div>
<div> </div>
<div>//-------Create Query Pop-up panel (with seperate tabs for each query)</div>
<div> var win;</div>
<div> var button = Ext.get('show-btn');</div>
<div> </div>
<div> //Define address search tab</div>
<div> var queries_tab = new Ext.TabPanel({</div>
<div> applyTo: 'hello-tabs', </div>
<div> autoTabs:true, </div>
<div> activeTab:0, </div>
<div> deferredRender:false, </div>
<div> border:false </div>
<div> });</div>
<div> </div>
<div> //Define button function to show pop-up query panel</div>
<div> button.on('click', function(){ </div>
<div> if(!win){ </div>
<div> win = new Ext.Window({ </div>
<div> applyTo:'hello-win', </div>
<div> layout:'fit', </div>
<div> width:500, </div>
<div> height:300, </div>
<div> closeAction:'hide', //'close' - destroy the component </div>
<div> plain: true, </div>
<div> items: [queries_tab], </div>
<div> buttons: [{ </div>
<div> text: 'Close Query Form', </div>
<div> handler: function(){ </div>
<div> win.hide(); </div>
<div> } </div>
<div> }] </div>
<div> }); </div>
<div> } </div>
<div> win.show(this); </div>
<div> }); </div>
<div> </div>
<div>div id="hello-win" class="x-hidden"> </div>
<div> <div class="x-window-header">Webmap - Queries</div> </div>
<div> <div id="hello-tabs"> </div>
<div> <!-- Auto create tab 1 --> </div>
<div> <div class="x-tab" id="tab_Address" title="Address"> </div>
<div> <p align="left"><br />Choose an address:</p> </div>
<div> <br /><button onclick="Javascript:alert('testing');">Testing</button> </div>
<div> </div> </div>
<div> <div class="x-tab" id="tab_AOI" title="AOI"> </div>
<div> <p>AOI Query goes here</p> </div>
<div> </div> </div>
<div> <div class="x-tab" title="Taxroll"> </div>
<div> <p>Taxroll Query goes here</p> </div>
<div> </div> </div>
<div> <div class="x-tab" title="Street"> </div>
<div> <p>Street Query goes here</p> </div>
<div> </div> </div>
<div> <div class="x-tab" title="Lot/Block/Plan"> </div>
<div> <p>Lot/Block/Plan Query goes here</p> </div>
<div> </div></div>
<div> <div class="x-tab" title="Neighbourhood"> </div>
<div> <p>Neighbourhood Query goes here</p> </div>
<div> </div></div>
<div> <div class="x-tab" title="Intersection"> </div>
<div> <p>Intersection Query goes here</p> </div>
<div> </div></div>
<div> </div> </div>
<div> </div> </div>
<div><font color="#000080"> </font></div>
<div><font color="#000080"><br>
</font></div>
<div> </div>
<div> </div>
</font>
<DIV><P><HR>
This e-mail is intended for the original recipient(s) only. If you have received it in error, please advise the sender and delete this message.
</P></DIV>
</body>
</html>