PDA

View Full Version : Trying to move functionality from a Ext.SimpleStore/Ext.Window to an Ext.TabPanel



Planet_x
17 Sep 2010, 1:11 PM
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!



----------Original SimpleStore/Ext Window that is working and zooms into the proper mapextent when it is clicked

// Create the neccassary info for the zoom to county drop down box.
var store = new Ext.data.SimpleStore({
fields: ['value', 'text', 'bbox'],
data : [
['43R', '43 Reichley Street', new
OpenLayers.Bounds(-113.747591795464,52.2719118391991,-113.747021258667,52.2721269982475).transform(new
OpenLayers.Projection("EPSG:4326"), new
OpenLayers.Projection("EPSG:900913"))]]
});


// EXT Window for Address Search
var window = new Ext.Window({
title: 'Zoom to Address',
width: 200,
height: 100,
minWidth: 200,
minHeight: 100,
renderTo: 'tab_Address',
closable: true,
layout: 'fit',
plain: true,
bodyStyle: 'padding: 5px;',
items: [{
xtype: 'shortcuts',
map: map,
store: store,
templates: {
header: new Ext.Template("Choose an Address"),
footer: new Ext.Template("The map will automatically center to this location")
}
}]
});

window.setPagePosition(300, 50);
window.show()




My new setup with tabs that I am trying to get to perform the same action --------

//-------Create Query Pop-up panel (with seperate tabs for each query)
var win;
var button = Ext.get('show-btn');

//Define address search tab
var queries_tab = new Ext.TabPanel({
applyTo: 'hello-tabs',
autoTabs:true,
activeTab:0,
deferredRender:false,
border:false
});

//Define button function to show pop-up query panel
button.on('click', function(){
if(!win){
win = new Ext.Window({
applyTo:'hello-win',
layout:'fit',
width:500,
height:300,
closeAction:'hide', //'close' - destroy the component
plain: true,
items: [queries_tab],
buttons: [{
text: 'Close Query Form',
handler: function(){
win.hide();
}
}]
});
}
win.show(this);
});

div id="hello-win" class="x-hidden">
<div class="x-window-header">Webmap - Queries</div>
<div id="hello-tabs">
<!-- Auto create tab 1 -->
<div class="x-tab" id="tab_Address" title="Address">
<p align="left"><br />Choose an address:</p>
<br /><button onclick="Javascript:alert('testing');">Testing</button>
</div>
<div class="x-tab" id="tab_AOI" title="AOI">
<p>AOI Query goes here</p>
</div>
<div class="x-tab" title="Taxroll">
<p>Taxroll Query goes here</p>
</div>
<div class="x-tab" title="Street">
<p>Street Query goes here</p>
</div>
<div class="x-tab" title="Lot/Block/Plan">
<p>Lot/Block/Plan Query goes here</p>
</div>
<div class="x-tab" title="Neighbourhood">
<p>Neighbourhood Query goes here</p>
</div>
<div class="x-tab" title="Intersection">
<p>Intersection Query goes here</p>
</div>
</div>
</div>

Planet_x
18 Sep 2010, 3:10 PM
Still having issues with this, can a simplestore control be attached to a tabpanel the same as I am using it with a window control, and if so how? thanks for advice