[Users] Trying to use a simplestore/ext window and convert to a tabpanel

[Andrew Stewart]

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>








-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://www.geoext.org/pipermail/users/attachments/20100917/fcbb0098/attachment.htm