Destroy method in form panel

Question

I am capturing geoposition using Cordova API and then on success, I render the current location on a Google map.

When I first do a get_position using I render a form as follows:

var geo_panel = new Ext.form.Panel({
            useCurrentLocation: true,
            fullscreen: true,
            layout: 'fit',
            items: obj
        });

Where obj is a toolbar defined as

toolbar = Ext.create('Ext.Toolbar', {
                docked: 'top',
                alias : 'widget.geolocationToolbar',
                ui: 'light',
                defaults: {
                    iconMask: true
                },
                items: [
                    {
                        xtype: 'button',
                        ui: 'back',
                        text: 'Back',
                        // destroy form.Panel overlay and return to tree store view
                        handler: function() {
                            geo_panel.destroy();
                        }
                    },
                    {
                        xtype: 'button',
                        itemId: 'stopWatch',
                        text: 'StopWatch',
                        iconCls: 'arrow_right',
                        iconMask: true,
                        handler: function() {
                            EvaluateIt.utils.UtilityService.clear_watch();
                        }
                    },
                    {
                        xtype: 'selectfield',
                        itemId: 'accuracy',
                        autoSelect: false,
                        placeHolder: 'accuracy',
                        options: [
                            {text: ''},
                            {text: 'high',  value: 5},
                            {text: 'med high',  value: 10},
                            {text: 'medium',  value: 15},
                            {text: 'med low',  value: 20},
                            {text: 'low',  value: 66}
                        ],
                        listeners: {
                            change: function(field, value) {
                                if (value instanceof Ext.data.Model) {
                                    value = value.get(field.getValueField());
                                }
                                console.log(value);
                                // set accuracy as config variable
                                EvaluateIt.config.accuracy = value;
                            }
                        }
                    },
                    {
                        iconCls: 'home',
                        handler: function() {
                            google_map.getMap().panTo(position);
                        }
                    }
                ]
            });

This renders just fine in my form panel.

My onSuccess method then passes an argument to add a google_map to the geo_panel form panel. I have tried geo_panel.add(toolbar, google_map), which works, but I then get an issue of when I hit the "Back" button in the toolbar above:

{
    xtype: 'button',
    ui: 'back',
    text: 'Back',
    // destroy form.Panel overlay and return to tree store view
    handler: function() {
        geo_panel.destroy();
    }
},

I have to click it twice: the first time destroys the google_map and then the second destroys the toolbar. This is a very undesirable behavior. I've tried destroying each of the items in the geo_panel, but that does other weird things. This is acting like there are multiple instances of geo_panel. Any ideas?

Answer 1

I figured it out: I was creating two instances of my geo_panel. I refactored the code and everything now works as desired.