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

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.Projection("EPSG:4326"), new

// 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);

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',

//Define button function to show pop-up query panel
button.on('click', function(){
win = new Ext.Window({
closeAction:'hide', //'close' - destroy the component
plain: true,
items: [queries_tab],
buttons: [{
text: 'Close Query Form',
handler: function(){

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 class="x-tab" id="tab_AOI" title="AOI">
<p>AOI Query goes here</p>
<div class="x-tab" title="Taxroll">
<p>Taxroll Query goes here</p>
<div class="x-tab" title="Street">
<p>Street Query goes here</p>
<div class="x-tab" title="Lot/Block/Plan">
<p>Lot/Block/Plan Query goes here</p>
<div class="x-tab" title="Neighbourhood">
<p>Neighbourhood Query goes here</p>
<div class="x-tab" title="Intersection">
<p>Intersection Query goes here</p>

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